微信小程序自定义轮播图


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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP生成静态页面详解
2006/12/05 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
jQuery JSON的解析方式分享
2011/04/05 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
公交公司毕业生求职信
2014/02/15 职场文书
法律进社区活动总结
2015/05/07 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
2016教师国培研修感言
2015/12/08 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
Nginx实现负载均衡的项目实践
2022/03/18 Servers
Python实现简单得递归下降Parser
2022/05/02 Python