上一节我们讲了如何创建一个淘宝客小程序项目，大道理我们已经讲过了，所以今天要说的是在首页增加一个滚动广告栏。效果如下:
https://MP . weixin . QQ . com/debug/wxadoc/dev/component/swiper . html
主要使用swiper，
有了这个方法，我们就可以给我们的页面添加一个布局。具体代码如下:
& lt！-pages/index/hot . wxml-& gt；
& ltview class="container1 " >
& ltscroll-view class = " scroll-container " upper-threshold = " { { upper threshold } } " bind scroll = " onto top " scroll-y = " true " style = " height:calc(100%-1px)" & gt；
& ltswiper indicator-dots = " { { indicator dots } } " autoplay = " { { autoplay } } " interval = " { { interval } } " duration = " { { duration } } " & gt；
<block wx:for="{{imgUrls}}">& ltblock wx:for = " { { imgUrls } } " & gt；
& ltswiper-item & gt；
& ltimage src = " { { item } } " class = " slide-image " style = " height:{ { window width * 0.375 } } px！重要"/>；
& lt/swiper-item & gt；
& lt/block & gt；
& lt/swiper & gt；
& lt/scroll-view & gt；
& lt/view & gt；
然后，让我们写下布局样式，以便图片可以适合全屏，并添加代码。wxss。
/* pages/索引/hot.wxss */
.容器1 {
宽度:100%；
填充:0；
边距:0；
背景色:# fff
}
。卷轴容器{
宽度:100%；
}
。幻灯片图像{
宽度:100%；
}
然后，我们可以在页面的js中添加数据代码
这是我们滚动的图片数据，
指示器点:是否显示面板指示器点。
自动播放:是否切换
间隔:自动切换时间间隔
持续时间:滑动动画的持续时间
// pages/index/hot.js
页面({
/**
*页面的初始数据
*/
数据:{
imgUrls: [imgUrls: [
'http://img1.tbcdn.cn/tfscom/i2/2663359052/TB2eLU8phtmpuFjSZFqXXbHFpXa_!!2663359052.jpg_400x400.jpg', 'http://img1.tbcdn.cn/tfscom/i3/367908919/TB2x.MAdSBjpuFjy1XdXXaooVXa_!!367908919.jpg_290x290.jpg', 'http://img1.tbcdn.cn/tfscom/i2/2663359052/TB2eLU8phtmpuFjSZFqXXbHFpXa_!!2663359052.jpg_400x400.jpg', 'http://img1.tbcdn.cn/tfscom/i2/2663359052/TB2eLU8phtmpuFjSZFqXXbHFpXa_!!2663359052.jpg_400x400.jpg'http://img 1 . tbcdn . cn/TFS com/I2/2663359052/TB 2 elu 8 phtmpufjszfqxxbhfpxa _！！2663359052.jpg_400x400.jpg '，'http://img1.tbcdn.cn/tfscom/i3/367908919/TB2x。MAdSBjpuFjy1XdXXaooVXa_！！367908919.jpg_290x290.jpg '，' http://img 1 . TB cdn . cn/TFS com/I2/2663359052/TB 2 elu 8 phtmpufjszfqxxbhfpxa _！！2663359052.jpg_400x400.jpg '，' http://img 1 . TB cdn . cn/TFS com/I2/2663359052/TB 2 elu 8 phtmpufjszfqxxbhfpxa _！！' 2663359052.jpg_400x400.jpg '
],
指示器点:对，
自动播放:没错，
区间:4000，
持续时间:2000年，
窗宽:320，
上限阈值:“290”
},
/**
*生命周期功能-监控页面加载
*/
onLoad:函数(选项){
},
/**
*生命周期功能——监听页面第一次渲染完成。
*/
onReady: function () {
},
/**
*生命周期功能-监控页面显示
*/
onShow: function () {
},
/**
*生命周期功能-监控页面隐藏
*/
onHide: function () {
},
/**
*生命周期功能-监控页面卸载
*/
onUnload: function () {
},
/**
*页面相关事件处理程序-监听用户下拉动作。
*/
onpulldownresh:function(){
},
/**
*页面底部pull事件的处理函数。
*/
onReachBottom: function () {
},
/**
*用户点击右上角的分享。
*/
onShareAppMessage: function () {
}
})
小程序的创建比较简单，我就不把源代码上传到网站了。可以按照教程一步一步来开发。如果不了解，可以继续关注我的头条号:有点热。如有疑问，欢迎留言咨询。我一看到就回复你。也欢迎收藏转发。如果你需要转载到其他网站，请联系我，yeehot.com。如果您有任何意见或想法，请在下方留言。有什么不明白的，可以自己给我留言。
