動態加載上下滾動數據列表（小程序開發）

 實現如上圖所示的內容，利用微信小程序自帶的swiper標簽，設置垂直滾動，原理就是這么簡單，但是，如果需要動態加載數據呢？

<view class='flex news'>
  <view class='news-left'>頭條</view>
  <swiper class='news-right' vertical="true" autoplay="true" interval="3000" circular="true">
    <swiper-item>
      <navigator url='../news/news' class='news-content' wx:for="{{2}}">新聞標題</navigator>
    </swiper-item>
  </swiper>
</view>

 

比如：我有n條數據，但現在是每次加載的是兩條數據，那么需要創建多少個swiper-item呢？

通過一個小小的計算方式來實現，相信大家動一下腦筋就明白。

var swiperItem=function(length,item){
  if(length%item==0){
    return length / item;
  }else{
    return (length /item)+1;
  }
}

module.exports = {
　　swiperItem:swiperItem //暴露該返回值
};

這個方法我是用在一個工具類中，我覺得在開發小程序的過程中，也可以盡量的做到封裝和繼承。比如：寫一個工具類，將所有屬於數據轉化這類的方法可以封裝在這個js文件中，然后通過引用，直接調用這個方法，免去了在page頁面js中代碼過多，不便於后面維護。由於接手的是已完成的項目，所以用的是js語法，沒有用ts語法，學過Java或其他面向對象編程思想的同學，可以嘗試用ts語法來開發小程序，好處就不多說了。

在index.js文件中引用該方

var util=require("../../../../utils/util.js");//引用
Page({
　　data{
　　　　barNum:0
　　}
　　onLoad: function(options) {
　　　　that.setData({
        barNum:util.swiperItem(res.length,2) //res數據為向后台請求的數據，2是在每個swiper-item中顯示的條數
      })
　　}
})

這樣就可以知道可以分多少個swiper-item展示了，（wx:for="{{barNum}}"）但是，在每個swi-item中要顯示兩條數據，那n條數據中，怎么一一對應插入到navigator中呢？

這里寫一下總體思路吧：假如有10條數據，那肯定是分為5頁顯示了，那10條數據如何放入到navigator中呢？可以利用數組下標來表示：

newsList表示json數組，每條新聞標題可以表示為：newsList[0]，newsList[1].....這樣表示下去一直到newsList[9];

這個時候定義的barNum這個變量肯定是5，也就是說wx:for="{{5}}"，下標index1為，0,1,2,3,4可以從這個下標入手，

還有另一個下標，那就是在navigator中的，wx:for="{{2}}"，因為每次兩條都是寫死的，所以，每次的index2下標都是0,1

我的計算思路是這樣的：下標=（index1*2）+index2，這樣循環newsList數組的下標都是遵循0,1,2,3...的

具體代碼入下；

<view class='flex news'>
  <view class='news-left'>頭條</view>
  <swiper class='news-right' vertical="true" autoplay="true" interval="3000" circular="true">
    <swiper-item wx:for="{{barNum}}" wx:for-index="idx1">
      <navigator url='../news/news' class='news-content' wx:for="{{2}}" wx:for-index="idx2">{{topicList[(idx1*2)+idx2].title}}</navigator>
    </swiper-item>
  </swiper>
</view>    

 

當然，肯定會有 更好的計算分頁方法，推算不易，不喜勿噴。。。。