微信小程序自定义轮播图


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 相关文章推荐
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
详解JS中的attribute属性
Apr 25 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
详解webpack 入门与解析
Apr 09 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
JS随机密码生成算法
Sep 23 Javascript
vuex入门最详细整理
Mar 04 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
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php计算年龄精准到年月日
2015/11/17 PHP
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Python中实现结构相似的函数调用方法
2015/03/10 Python
Python 26进制计算实现方法
2015/05/28 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
研究生毕业自我鉴定范文
2014/03/27 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
成绩单家长意见
2015/06/03 职场文书
单位综合评价意见
2015/06/05 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS