轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。
废话少说，下面开始动手。
业务需求：
重点说明：
由于微信小程序，整个项目编译后的大小不能超过1M
index.wxml：
这里使用小程序提供的
index.wxss：
index.js：
网络访问，获取轮播图的图片
util.getRecommend(function(data){
that.setData({
slider: data.data.slider
})
});
},//轮播图的切换事件
swiperChange: function(e){
//只要把切换后当前的index传给组件的current属性即可
this.setData({
swiperCurrent: e.detail.current
})
},//点击指示点切换
chuangEvent: function(e){
this.setData({
swiperCurrent: e.currentTarget.id
})
}
})
utils.js：
网络访问
function getRecommend(callback) {
wx.request({
url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',data: {
g_tk: 5381,uin: 0,format: 'json',inCharset: 'utf-8',outCharset: 'utf-8',notice: 0,platform: 'h5',needNewCode: 1,_: Date.now()
},method: 'GET',header: {'content-Type': 'application/json'},success: function(res){
if(res.statusCode == 200){
callback(res.data);
}
}
})
}
module.exports = {
getRecommend: getRecommend
}
运行：
