微信小程序自定义轮播图


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 this关键字的问题
Jan 09 Javascript
JS面向对象编程浅析
Aug 28 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
Ant Design的Table组件去除
Oct 24 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
mayfish 数据入库验证代码
2010/04/30 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python解惑之整数比较详解
2017/04/24 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
升职自荐信
2013/11/28 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
招商银行收入证明
2015/06/17 职场文书
python基础之函数的定义和调用
2021/10/24 Python
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫