微信小程序自定义轮播图


Posted in Javascript onNovember 04, 2018

本文实例为大家分享了微信小程序自定义轮播图展示的具体代码,供大家参考,具体内容如下

默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等。

首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码如下:

<view class="swiper-container">
 <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
 <block wx:for="{{slider}}" wx:key="unique">
 <swiper-item>
 <image src="{{item.picUrl}}" class="img"></image>
 </swiper-item>
 </block>
 </swiper>
 
 <view class="dots">
 <block wx:for="{{slider}}" wx:key="unique">
 <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
 </block>
 </view>
</view>

然后是wxss代码:

swiper-container{
 position: relative;
}
.swiper-container .swiper{
 height: 300rpx;
}
.swiper-container .swiper .img{
 width: 100%;
 height: 100%;
}
.swiper-container .dots{
 position: absolute;
 left: 0;
 right: 0;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 margin: 0 8rpx;
 width: 14rpx;
 height: 14rpx;
 background: #fff;
 border-radius: 8rpx;
 transition: all .6s;
}
.swiper-container .dots .dot.active{
 width: 24rpx;
 background: #f80;
}

再对swiper的bindchange属性绑定对应的事件:

Page({
data: {
 slider: [
 {picUrl: '../../images/T003R720x288M000000rVobR3xG73f.jpg'},
 {picUrl: '../../images/T003R720x288M000000j6Tax0WLWhD.jpg'},
 {picUrl: '../../images/T003R720x288M000000a4LLK2VXxvj.jpg'},
 ],
 swiperCurrent: 0,
},
swiperChange: function(e){
 this.setData({
 swiperCurrent: e.detail.current
 })
}
})

效果图:

微信小程序自定义轮播图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
浅谈React碰到v-if
Nov 04 #Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
You might like
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python实现简易淘宝购物
2019/11/22 Python
Python的形参和实参使用方式
2019/12/24 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
linux面试题参考答案(2)
2015/12/06 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
毕业生自荐书模版
2014/01/04 职场文书
教师开学感言
2014/02/14 职场文书
初中学生期末评语
2014/04/24 职场文书
校庆团日活动总结
2014/08/28 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
就业推荐表导师评语
2014/12/31 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android