微信小程序自定义轮播图


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 相关文章推荐
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
使用JS实现简易计算器
Jun 14 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环境――Appserv
2006/12/13 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python标准异常和异常处理详解
2015/02/02 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python排序算法实例代码
2017/08/10 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python列表操作方法详解
2020/02/09 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
省文明单位申报材料
2014/05/08 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
个园导游词
2015/02/04 职场文书
教师节感想
2015/08/11 职场文书
Python基础之进程详解
2021/05/21 Python
Pygame如何使用精灵和碰撞检测
2021/11/17 Python