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

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

主要介绍了微信小程序实现Swiper轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣

的小伙伴们可以参考一下

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

1.逻辑层逻辑层

mine.js

// pages/mine/mine.js

Page({

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, // 是否采用衔接滑动

swiperCurrent: 0

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

},

//点击指示点切换

chuangEvent: function (e) {

this.setData({

swiperCurrent: e.currentTarget.id

})

}

})

2.页面布局页面布局

mine.wxml

<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">