1.wxml
<view class="box">
<swiper class='swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>
<block wx:for="{{imgList}}" wx:key="imgList">
<swiper-item bindtap='chomeCarouselClick' data-url='{{item.url}}'>
<image class="img" src='{{item.url}}' mode='aspectFill' ></image>
</swiper-item>
</block>
</swiper>
</view>
/*
indicator-dots 是否显示指示器
indicator-color 指示器默认颜色
indicator-active-color 指示器选中颜色
autoplay 是否自动播放
interval 每一页停留的时长
circular 播放到最后一页后是否再衔接第一页循环播放
*/
2.wxss
page { //当前页背景色
background-color: #f4f4f4;
}
.box{
width: 100%;
background-color: reb;
}
.swiper{
width: 100%;
height: 400rpx;
display: block;
position: relative;
background: #f4f4f4;
}
.img{
width: 100%;
height: inherit;
}
3.js
data: {
host: getApp().globalData.baseUrl,
carouselList:[],
},
onLoad: function (options) {
this.requestCarouselListData();
},
requestCarouselListData(){
var that = this;
var urlStr = that.data.host + "/xjj/chome_carousel_list.json";
console.log("请求轮播图:" + urlStr);
wx.request({
url: urlStr,
data: {
},
header: {
'content-type': 'application/json'
},
success(res) {
console.log("轮播图返回值:");
console.log(res.data.result);
var resultArr = res.data.result;
that.setData({
carouselList: resultArr
})
}
})
},
chomeCarouselClick: function (event) {
var urlStr = event.currentTarget.dataset.url;
console.log("点击了轮播图:" + urlStr);
},