上一节，我们讲到如何创建一个淘宝客小程序的工程，已经说了大致的原理，那么今天我们要说的是在首页添加一个滚动的广告栏。效果如下：
我们可以看到这是一个左右滑动的view,从小程序的文档我们可以看到本身提供了一个这样滚动的方法
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
主要是使用了swiper，
有了这个方法后，那么我们可以在我们的页面加上一个布局，具体代码如下：
<!–pages/index/hot.wxml–>
<view class=\”container1\”>
<scroll-view class=\”scroll-container\” upper-threshold=\”{{upperthreshold}}\” bindscroll=\”onToTop\” scroll-y=\”true\” style=\”height:calc(100% – 1px)\”>
<swiper indicator-dots=\”{{indicatorDots}}\” autoplay=\”{{autoplay}}\” interval=\”{{interval}}\” duration=\”{{duration}}\”>
<block wx:for=\”{{imgUrls}}\”>
<swiper-item>
<image src=\”{{item}}\” class=\”slide-image\” style=\”height:{{windowWidth * 0.375}}px !important\”/>
</swiper-item>
</block>
</swiper>
</scroll-view>
</view>
接着我们写一下布局的样式，让图片可以适配全屏，在.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，如果有什么意见或者想法欢迎在下方留言。如果有什么不明白的话，可以自己给我留言了
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。