微信小程序自定义轮播图


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 相关文章推荐
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 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 数组实例说明
2008/08/18 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
js left,right,mid函数
2008/06/10 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python帮你识破双11的套路
2019/11/11 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
linux 下selenium chrome使用详解
2020/04/02 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
党员创先争优活动总结
2014/05/04 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
万里长城导游词
2015/01/30 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Vue操作Storage本地化存储
2022/04/29 Vue.js