小程序?qū)崿F(xiàn)瀑布流動態(tài)加載列表
更新時間：2022年07月27日 11:44:10 作者：工具人小胡
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)瀑布流動態(tài)加載列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了小程序?qū)崿F(xiàn)瀑布流動態(tài)加載列表的具體代碼，供大家參考，具體內(nèi)容如下
最近業(yè)務(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)用瀑布流排列方法。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
一種很常見的寫法,大家都是這樣寫的，但如果這樣的代碼，殺毒軟件認(rèn)為是病毒的吧，就太惡劣的。判斷能力也太差了。2009-09-09
這篇文章主要介紹了JS常用函數(shù)和常用技巧小結(jié)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
JS實現(xiàn)的圖片選擇順序切換和循環(huán)切換功能示例【測試可用】
這篇文章主要介紹了JS實現(xiàn)的圖片選擇順序切換和循環(huán)切換功能,結(jié)合完整實例形式分析了JavaScript基于事件響應(yīng)與樣式動態(tài)操作實現(xiàn)圖片切換相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS控制文本域只讀或可寫屬性的方法,涉及javascript針對頁面元素屬性的動態(tài)操作技巧,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了javascript獲取select值的方法,結(jié)合完整實例形式分析了javascript動態(tài)遍歷與操作頁面元素相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-06-06
關(guān)于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法
最近在使用JS動畫做一些練習(xí)的時候我發(fā)現(xiàn)在動畫執(zhí)行時間內(nèi)快速移開鼠標(biāo)時會出現(xiàn)動畫因鼠標(biāo)移動過快從而導(dǎo)致代碼沖突讓畫面抖動的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)動畫時動畫抖動的原因與解決方法,需要的朋友可以參考下2022-06-06
瀏覽器加載、渲染和解析過程的黑箱分析,對于渲染，利用 Fiddler 將網(wǎng)速調(diào)慢，可以看到 css 下載后會馬上渲染到頁面，渲染和下載同步進(jìn)行,需要的朋友可以參考下2012-11-11
javascript動態(tài)添加checkbox復(fù)選框的方法
這篇文章主要介紹了javascript動態(tài)添加checkbox復(fù)選框的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
JSON與JavaScript對象關(guān)系及語法規(guī)則詳解
這篇文章主要為大家介紹了JSON與JavaScript對象關(guān)系及語法規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
JavaScript可以對各種網(wǎng)頁元素進(jìn)行操控,下面這篇文章主要給大家介紹了關(guān)于JavaScript操作元素的相關(guān)資料,文中通過多個實例詳細(xì)介紹了操作元素的方法，需要的朋友可以參考下2021-06-06