微信小程序自定义轮播图


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陷阱题
Feb 07 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
js倒计时抢购实例
Dec 20 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
vue多个元素的样式选择器问题
Nov 29 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
Yii实现简单分页的方法
2016/04/29 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
php如何获取Http请求
2020/04/30 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python pandas常用函数详解
2018/02/07 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
用python批量移动文件
2021/01/14 Python
Python实现随机爬山算法
2021/01/29 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
楼面经理岗位职责范本
2014/02/18 职场文书
小区推广策划方案
2014/06/06 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
外贸采购员岗位职责
2015/04/03 职场文书