微信小程序 swiper 循环遍历N个数据内容

数据是后台给的不确定数量，要在swiper的每页中放固定数量的数据条数实现效果为封面大图

技术大佬请绕道,前端小白献丑了。

• 先上.wxml代码

<swiper indicator-dots="true" duration="800" circular="true">
  <block>
    <swiper-item wx:for="{{lbSellerCatsLen}}" wx:for-index="i" wx:key="key">        //i  =  swiper-item中的下标值
      <view class="menu-list">
        <view class="menu-list-item" wx:key="key" wx:for="{{lbSellerCats}}" wx:for-index="j" wx:if="{{ ( j >= ( i-0 )*10 ) && ( j < (i+1) * 10 ) }}">         
        //  条件判断中的  j = 每条数据的下标
          <navigator>
            <image src="http://tts.fotekcn.cn/{{item.icon}}" />
            <view>{{item.name}}</view>
          </navigator>
        </view>
      </view>
    </swiper-item>
  </block>
</swiper>
复制代码

• 再上.js代码

wx.request({            
  url:'',                   //避免涉及数据源
  data:'',
  method:'POST',
  success:function(res){
    var dl = (res.obj.lbSellerCats.length % 10 === 0) ? (res.obj.lbSellerCats.length / 10) : ((res.obj.lbSellerCats.length / 10) + 1)
    var dt = {
      lbSellerCats: res.obj.lbSellerCats,               //获取到需要遍历的所有数据
      lbSellerCatsLen: dl,                              //通过上面的三目运算获取共需要分页的页数
    }
    this.setData(dt)                                    //小程序的渣渣玩意，需要setData才能更新视图
  }
})
复制代码

这样子的数据源与页面布局就差不多了。 开始整理思路:

• 每页显示10条，就是第一页显示的数据，必须的数据的下标大于等于0，小于10，才能显示前面10条数据
• 如此类推，每显示1页的数据，那数据的下标就大于等于 页数的下标 * 10，小于 (页数 + 1) * 10的下标
• 可以通过预计结果反推，得出公式

第一页	数据的最小下标	数据的最大下标
1	0	9
2	10	19
3	20	29
...	...	...

转载于:https://juejin.im/post/5ab865b85188255561414057