怎么用小程序做淘宝客（淘宝客开发-打造一个自己的小程序添加首页滚动广告）
怎么用小程序做淘宝客（淘宝客开发-打造一个自己的小程序添加首页滚动广告）<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <scroll-view class="scroll-container" upper-threshold="{{upperthreshold}}" bindscroll="onToTop" scroll-y="true" style="height:calc(100% - 1px)">有了这个方法后，那么我们可以在我们的页面加上一个布局，具体代码如下：<!--pages/index/hot.wxml--><view class="container1">
上一节，我们讲到如何创建一个淘宝客小程序的工程，已经说了大致的原理，那么今天我们要说的是在首页添加一个滚动的广告栏。效果如下：
我们可以看到这是一个左右滑动的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="https://img.aigexing.com{{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，如果有什么意见或者想法欢迎在下方留言。如果有什么不明白的话，可以自己给我留言了
