⼩程序实战之轮播图（3）
轮播图是⼤部分应⽤的⼀个常⽤的功能，常⽤于⼴告投放、产品展⽰、活动展⽰等等。
漂亮的轮播图效果可以吸引⽤户的点击，达到推⼴产品的作⽤。
废话少说，下⾯开始动⼿。
业务需求：
5个图⽚轮番播放，可以左右滑动，点击指⽰点可以切换图⽚
重点说明：
由于⼩程序，整个项⽬编译后的⼤⼩不能超过1M
查看做轮播图功能的⼀张图⽚⼤⼩都已经有100+k了
那么我们可以把图⽚放在服务器上，发送请求来获取。
index.wxml：
这⾥使⽤⼩程序提供的<swiper>组件
autoplay：⾃动播放
interval：⾃动切换时间
duration：滑动动画的时长
current：当前所在的页⾯
bindchange：current 改变时会触发 change 事件
由于<swiper>组件提供的指⽰点样式⽐较单⼀，另外再⾃定义指⽰点的样式
<view class="recommend" >
<view class="swiper-container">
<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">    <block wx:for="{{slider}}" wx:key="unique">
<swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}">
<image src="{{item.picUrl}}" class="img"></image>
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{slider}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
</block>
</view>
</view>
</view>
index.wxss：
.swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 300rpx;
}
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
.
swiper-container .dots{
position: absolute;
right: 40rpx;
bottom: 20rpx;
display: flex;
justify-content: center;
js实现轮播图最简代码
}
.swiper-container .dots .dot{
margin: 0 10rpx;
width: 28rpx;
height: 28rpx;
background: #fff;
border-radius: 50%;
transition: all .6s;
font: 300 18rpx/28rpx "microsoft yahei";
text-align: center;
}
.swiper-container .dots .dot.active{
background: #f80;
color:#fff;
}
index.js：
/
/导⼊js
var util = require('../../utils/util.js')
Page({
data: {
slider: [],
swiperCurrent: 0
},
onLoad: function () {
var that = this;
//⽹络访问，获取轮播图的图⽚
that.setData({
slider: data.data.slider
})
});
},
//轮播图的切换事件
swiperChange: function(e){
//只要把切换后当前的index传给<swiper>组件的current属性即可
this.setData({
swiperCurrent: e.detail.current
})
},
//点击指⽰点切换
chuangEvent: function(e){
this.setData({
swiperCurrent: e.currentTarget.id
})
}
})
utils.js：
//⽹络访问
function getRecommend(callback) {
url: 'c.y.qq/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,
_: w()
},
method: 'GET',
header: {'content-Type': 'application/json'},
success: function(res){
if(res.statusCode == 200){
callback(res.data);
}
}
})
}
getRecommend: getRecommend
}
运⾏：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。