本篇内容介绍了“小程序如何实现瀑布流动态加载列表”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
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发生变化，组件就会调用瀑布流排列方法。
“小程序如何实现瀑布流动态加载列表”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
