微信小程序自定义轮播图


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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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 empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Vue实现手机计算器
2020/08/17 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python查看模块,对象的函数方法
2018/10/16 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
python 如何快速复制序列
2020/09/07 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
一些Solaris面试题
2013/03/22 面试题
建筑系毕业生自我鉴定
2014/01/24 职场文书
小学教师听课制度
2014/02/01 职场文书
倡议书范文大全
2015/04/28 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android