微信小程序自定义轮播图


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模拟弹出效果代码修正版
Aug 07 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
异步加载script的代码
Jan 12 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php构造函数与析构函数
2016/04/23 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
javascript 函数调用规则
2009/08/26 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python关闭windows进程的方法
2015/04/18 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Python序列化pickle模块使用详解
2020/03/05 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python request post上传文件常见要点
2020/11/20 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
关于廉洁的广播稿
2014/01/30 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
教师学期个人总结
2015/02/11 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android