// 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 indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> <block wx:for="{{imgUrls}}" wx:key="id"> <swiper-item> <image src="https://www.jb51.net/{{item}}" /> </swiper-item> </block> </swiper> <!-- 自定义轮播图 --> <view> <swiper circular="true" autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange"> <block wx:for="{{slider}}" wx:key="unique"> <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}"> <image src="https://www.jb51.net/{{item.picUrl}}"></image> </swiper-item> </block> </swiper> <view> <block wx:for="{{slider}}" wx:key="unique"> <view bindtap="chuangEvent">{{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.效果图
5.参数
更多关于轮播图效果的专题，请点击下方链接查看学习