效果图:
当时看到上图红色圈起来的内容。因为需要与下面的小红点进行关联起来,首先想到的就是用swiper来实现,swiper下的swiper-item为一个一个的。但是我们这里一个swiper-item需要放满8个,然后再到下一页。 这时最好的就是让后台按数组返回,一个item里包含8个,再到下一个。这样前端也比较好处理。
如果这是后台不好处理,那我们前端也可以进行处理:
var a = [];
var b = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 22, 55, 88, 99, 77, 44, 77, 44, 11]
for (let i = 0, len = Math.ceil(b.length / 8); i < len; i++) {
a[i] = b.splice(0, 8)
}
console.log(a)
console.log(a.length)
以上为将一个数组的item里按照8个进行返回。
JS文件
var a = [];
for (let i = 0, len = Math.ceil(that.data.brand.length / 8); i < len; i++) {
a[i] = res.data.brand.splice(0, 8)
}
console.log(a.length)
that.setData({
brand: a,
branditem: a,
})
console.log(that.data.branditem)
WXML文件
<view class="banner">
<swiper style="{{i.length>4?'height: 407rpx;':'height: 213rpx;'}}" autoplay="true" interval="3000" duration="500"
current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{brand}}" wx:key wx:for-item="i">
<swiper-item class="swiper_item">
<!-- 一个item里面8个 -->
<view class="itemAll" wx:if="{{i}}">
<view class="brand" wx:for="{{i}}">
<image class="brandimg" src="{{item.image}}"></image>
<view class="brandtex line1">{{item.title}}</view>
</view>
</view>
<!-- <image style="width:100%;height:100%;" src="{{item.image}}"></image> -->
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{brand}}" wx:key>
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>