后端将一个数组传给我们,需求要把它们进行切割在进行展示,还有自定义swiper指示点,都会在代码里进行输写
代码语言:javascript复制data:{
currentSwiper: 0,
recom_list: [{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
}
],
}
//切割数组
onLoad(){
this.getrecom()
}
getrecom() {
var result = []
for (var i = 0; i < this.data.recom_list.length; i = 3) {
result.push(this.data.recom_list.slice(i, i 3));
}
this.setData({
recom_list: result
})
console.log(this.data.recom_list)
},
// 通过下标改变指示点
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
代码语言:javascript复制 <view class="carousel">
<swiper class="swiper" bindchange="swiperChange">
<swiper-item wx:for="{{recom_list}}" wx:for-item="item" wx:for-index="index" wx:key>
<view class="info" wx:for="{{item}}" wx:for-item="row" wx:for-index="i" wx:key>
<view class="avatar">
<image src="{{row.avatar}}"></image>
</view>
<view class='row'>
<view class="title">{{row.name}}</view>
<view class='col'>{{row.college}}</view>
<view class="bottom">
<view>好评数:{{row.praise}}</view>
<view>咨询量:{{row.advisory}}</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<!--自定义指示点-->
<view class="dots">
<block wx:for="{{recom_list}}" wx:key>
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>