微信小程序实现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 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
微信小程序实现左右列表联动
May 19 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
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出错界面
2006/10/09 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python如何调用外部系统命令
2019/08/07 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
市政施工员自我鉴定
2014/01/15 职场文书
保险专业自荐信范文
2014/02/20 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
检讨书范文
2019/04/16 职场文书
element多个表单校验的实现
2021/05/27 Javascript