微信小程序自定义轮播图


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四则运算函数代码
Jul 21 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
微信小程序实现带缩略图轮播效果
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
input file获得文件根目录简单实现
2013/04/26 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
关于vue面试题汇总
2018/03/20 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
python daemon守护进程实现
2016/08/27 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
房地产出纳岗位职责
2013/12/01 职场文书
给领导的检讨书
2014/02/16 职场文书
动员大会主持词
2014/03/20 职场文书
总经理任命书
2014/03/29 职场文书
委托书格式
2014/08/01 职场文书
蓬莱阁导游词
2015/02/04 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
员工考勤管理制度
2015/08/06 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
高中团支书竞选稿
2015/11/21 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python