在微信小程序中实现轮播图效果
1-index.js(获取轮播图数据）
data:{
//1-存放轮播图数据的列表。定义空列表。
swiperList:[]
},
onLoad: function(option){
//4-在onLoad调用函数
this.getSwiperList()
},
//2-在onLoad下平行配置函数，获取轮播图数据的方法.
//如不需要向服务发送参数，可省略 data 项
getSwiperList(){
wx.request({
url : 'url',
method : 'GET',
data:'data'
success:(res)=>{
console.log(res)
//3-将服务器获取数据保存到data里的 swiperList中
this.setData({
swiperList:res.data
})
}
})
},
2-index.wxml（渲染轮播图效果）
<!--轮播图区域，indicator-dots小圆点，circular循环-->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
3-index.wxss(美化轮播图）
swiper{
height:350rpx;
}
swiper image{
width:100%;
height:100%;
}
本文链接：https://www.qq8652.cn/post/120.html 转载请注明出处！
发表评论