swiper轮播——一个swiper_item里包含8个数据

效果图：

当时看到上图红色圈起来的内容。因为需要与下面的小红点进行关联起来，首先想到的就是用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>

核心思路：主要就是将一个正常的数据进行拆分，让里面的item按照8个8个的进行返回。