微信小程序自定义轮播图


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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
诚信考试承诺书
2014/03/27 职场文书
明星员工获奖感言
2014/08/14 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL