wxml:
<view class="banner-box">
<swiper class="home-banner swiper" indicator-dots="true" autoplay="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="rgba(255,255,255,1)" circular='true' interval="3000" duration="1000">
<block wx:key="unique" wx:for="{{slider}}" wx:for-index="index">
<swiper-item>
<image class="banner-img" src="{{item.img}}" bindtap='clickBanner' data-id="{{item}}" data-banner="{{item}}" data-index="{{index}}" class="slide-image" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
</view>
wxss:
/* strat 轮播图 */
.banner-box {
background-color: #fff;
height: 300rpx;
overflow: hidden;
}
.home-banner {
width: 100%;
height: 300rpx;
}
.home-banner image {
width: 100%;
height: 100%;
}
/* end 轮播图*/
js:
Page({
/**
* 页面的初始数据
*/
data: {
slider:[ //假数据
{'img':'/pages/img/123.jpg'},
{ 'img': '/pages//img/123.jpg' },
{ 'img': '/pages/img/123.jpg' },
{ 'img': '/pages/img/123.jpg' },
{ 'img': '/pages/img/123.jpg' },
{ 'img': '/pages/img/123.jpg' }
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})