微信小程序实现Swiper轮播图效果


Posted in Javascript onNovember 22, 2019

本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下

1.逻辑层

mine.js

// pages/mine/mine.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 /*轮播图 配置*/
 imgUrls: [
 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
 ],
 indicatorDots: true, // 是否显示面板指示点
 autoplay: true, // 是否自动切换
 interval: 5000, // 自动切换时间间隔
 duration: 500, // 滑动动画时长
 circular: true, // 是否采用衔接滑动
 /*自定义轮播图 配置*/
 slider: [
 { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },
 { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' },
 { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' }
 ],
 swiperCurrent: 0
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 
 //轮播图的切换事件 
 swiperChange: function (e) {
 //只要把切换后当前的index传给<swiper>组件的current属性即可 
 this.setData({
 swiperCurrent: e.detail.current
 })
 },
 //点击指示点切换 
 chuangEvent: function (e) {
 this.setData({
 swiperCurrent: e.currentTarget.id
 })
 }
})

2.页面布局

mine.wxml

<!--pages/mine/mine.wxml-->
<view>
 <!-- 轮播图 -->
 <swiper class="swiper" indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
 <block wx:for="{{imgUrls}}" wx:key="id">
 <swiper-item>
 <image src="{{item}}" class="slide-image" />
 </swiper-item>
 </block>
 </swiper>
 <!-- 自定义轮播图 -->
 <view class="swiper-container"> 
 <swiper circular="true" autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper"> 
 <block wx:for="{{slider}}" wx:key="unique"> 
 <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}"> 
  <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' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view> 
 </block> 
 </view> 
 </view>
</view>

3.样式

mine.wxss

/* pages/mine/mine.wxss */
/**轮播图 start**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}
/**轮播图 end**/
/**自定义轮播图 start**/
.swiper-container{ 
 position: relative; 
} 
.swiper-container .swiper{ 
 height: 400rpx; 
} 
.swiper-container .swiper .img{ 
 width: 100%; 
 height: 100%; 
} 
.swiper-container .dots{ 
 position: absolute; 
 right: 40rpx; 
 bottom: 20rpx; 
 display: flex; 
 justify-content: center; 
} 
.swiper-container .dots .dot{ 
 margin: 0 10rpx; 
 width: 28rpx; 
 height: 28rpx; 
 background: #fff; 
 border-radius: 50%; 
 transition: all .6s; 
 font: 300 18rpx/28rpx "microsoft yahei"; 
 text-align: center; 
} 
.swiper-container .dots .dot.active{ 
 background: #f80; 
 color:#fff; 
}
/**自定义轮播图 end**/

4.效果图

微信小程序实现Swiper轮播图效果

5.参数

微信小程序实现Swiper轮播图效果

更多关于轮播图效果的专题,请点击下方链接查看学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中click事件用法实例
Dec 26 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
微信小程序合法域名配置方法
May 06 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
Js代码中的span拼接问题解决
Nov 22 #Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
小程序实现图片预览裁剪插件
Nov 22 #Javascript
Vue数据双向绑定底层实现原理
Nov 22 #Javascript
Node如何后台数据库使用增删改查功能
Nov 21 #Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 #Javascript
微信小程序动态设置图片大小的方法
Nov 21 #Javascript
You might like
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php的ajax简单实例
2014/02/27 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
经理职责范文
2013/11/08 职场文书
行政部主管岗位职责
2013/12/28 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
小学生环保标语
2014/06/13 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
总账会计岗位职责
2015/04/02 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏