淘宝客开发-打造一个自己的小程序添加首页滚动广告
上一节，我们讲到如何创建一个淘宝客小程序的工程，已经说了大致的原理，那么今天我们要说的是在首页添加一个滚动的广告栏。效果如下：
我们可以看到这是一个左右滑动的view,从小程序的文档我们可以看到本身提供了一个这样滚动的方法
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
主要是使用了swiper，
有了这个方法后，那么我们可以在我们的页面加上一个布局，具体代码如下：
接着我们写一下布局的样式，让图片可以适配全屏，在.wxss中添加代码
/* pages/index/hot.wxss */
.container1 {
width: 100%;
padding:0;
margin: 0;
background-color: #fff;
}
.scroll-container{
width:100%;
}
.slide-image{
width:100%;
}
接着我们可以在页面的js中添加我们的数据代码了，其中
imgUrls：就是我们滚动的图片数据，
indicatorDots：是否显示面板指示点
autoplay：是否切换
interval：自动切换时间间隔
duration：滑动动画时长
// pages/index/hot.js
Page({
/**
* 页面的初始数据
*/
data: {
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’
],
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 2000,
windowWidth:320,
upperthreshold: ‘290’
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
小程序的创建比较简单，所以源码我就不上传到网站了。大家可以按照教程来一步一步开发，如果不懂可以继续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一时间回复大家的。也欢迎收藏与转发，如果需要转载到其他网站，请与我联系，yeehot.com，如果有什么意见或者想法欢迎在下方留言。如果有什么不明白的话，可以自己给我留言了
