小程序如何實現(xiàn)瀑布流動態(tài)加載列表

本篇內(nèi)容介紹了“小程序如何實現(xiàn)瀑布流動態(tài)加載列表”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、goodsBox.js代碼

想法很簡單，就是判斷兩列的高度，將數(shù)據(jù)插入低的一列。

let leftHeight = 0,
  rightHeight = 0; //分別定義左右兩邊的高度
let query;
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    goodsList: {
      type: Array,
      value: []
    },
    loadingShow: {
      type: Boolean,
      value: false
    },
    noInfoShow: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    leftList: [],
    rightList: []
  },
  observers: {
  // 當(dāng)goodsList發(fā)生變化時調(diào)用方法
    'goodsList': function (goodsList) {
      this.isLeft()
    }
  },
  /**
   * 組件的方法列表
   */
  methods: {
    async isLeft() {
      const {
        goodsList,
        leftList,
        rightList
      } = this.data;
      query = wx.createSelectorQuery().in(this);
      let list = goodsList.slice(leftList.length+rightList.length,goodsList.length)
      for (const item of list) {
        leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判斷兩邊高度，來覺得添加到那邊
        await this.getBoxHeight(leftList, rightList);
      }
      
    },
    getBoxHeight(leftList, rightList) { //獲取左右兩邊高度
      return new Promise((resolve, reject) => {
        this.setData({
          leftList,
          rightList
        }, () => {
          query.select('#left').boundingClientRect();
          query.select('#right').boundingClientRect();
          
          query.exec((res) => {
            leftHeight = res[0].height; //獲取左邊列表的高度
            rightHeight = res[1].height; //獲取右邊列表的高度
            resolve();
          });
        });
      })
    },
  }
})

這一塊需要注意的是 wx.createSelectorQuery().in(this)，將選擇器的選取范圍更改為自定義組件 component 內(nèi)。微信文檔.

2、goodsBox.wxml

這邊主要就是把頁面分成兩列，一些css就不多寫了

// wxml
<view class="box clearfix">
  <view id="left" class="left">
    <view class="shop_box" wx:for="{{leftList}}" wx:key="index" ></view>
  </view>
  <view id="right" class="right">
    <view class="shop_box" wx:for="{{rightList}}" wx:key="index" ></view>
  </view>
</view>
<view class="cu-load  loading" wx:if="{{loadingShow}}"></view>
<view class="cu-load  over" wx:if="{{noInfoShow}}"></view>

3、goodsBox.wxss

.left,.right{
  float: left;
}
.clearfix::after {
  content: ".";
  clear: both;
  display: block;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
.clearfix {
  zoom: 1;
}

4、頁面使用

現(xiàn)在json文件里面引用組件,然后使用組件

<goodsBox id="goodsBox" goodsList="{{goodsList}}" loadingShow="{{loadingShow}}" noInfoShow="{{noInfoShow}}"></goodsBox>

每次goodsList發(fā)生變化，組件就會調(diào)用瀑布流排列方法。

“小程序如何實現(xiàn)瀑布流動態(tài)加載列表”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！