小程序實現瀑佈流動態加載列表
本文實例為大傢分享瞭小程序實現瀑佈流動態加載列表的具體代碼，供大傢參考，具體內容如下
最近業務需要做一個商城列表，就自己寫瞭一個瀑佈流來加載列表。
這個列表在很多地方都需要用到，就給寫成組件，方便使用。
1、goodsBox.js代碼
想法很簡單，就是判斷兩列的高度，將數據插入低的一列。
let leftHeight = 0,
rightHeight = 0; //分別定義左右兩邊的高度
let query;
Component({
/**
* 組件的屬性列表
*/
properties: {
goodsList: {
type: Array,
value: []
},
loadingShow: {
type: Boolean,
value: false
},
noInfoShow: {
type: Boolean,
value: false
}
},
/**
* 組件的初始數據
*/
data: {
leftList: [],
rightList: []
},
observers: {
// 當goodsList發生變化時調用方法
'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 內。微信文檔.
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、頁面使用
現在json文件裡面引用組件,然後使用組件
<goodsBox id="goodsBox" goodsList="{{goodsList}}" loadingShow="{{loadingShow}}" noInfoShow="{{noInfoShow}}"></goodsBox>
每次goodsList發生變化，組件就會調用瀑佈流排列方法。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。