微信小程式 swiper 迴圈遍歷N個資料內容

BillsonKam發表於2018-03-26
微信小程式

資料是後臺給的不確定數量，要在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
... ... ...

相關文章