小程序设置列表瀑布流,当不知道列表数据中的图片元素在等宽时的高度数据时,不太好设置左、右边数据,所以通过:先将当前获取到的列表数据中的图片显示在页面中,用bindload='pubuImgLoad'事件来获取设置所有图片在等宽时的高度,再将计算出的高度数据存储在当前列表项JSON中,再根据左、右边容器的高度,逐个将列表项添加在左、右边容器中的数组中
app.js中加处理方法:
//处理设置最新获取到的瀑布流数据
setCurNewPubuImgData: function (oldImgDataJson) {
let oldImgData = [];
for (var item in oldImgDataJson) {
oldImgData[item] = oldImgDataJson[item];
}
return oldImgData;
},
//处理存储瀑布流左右两边数据
setCurResultsPubuImgData(newImgData, oldData, leftH, rightH ,callback) {
//let leftH = 0;
//let rightH = 0;
let resultsList = {
listL: [],
listR: [],
}
let leftStart = 0;
let rightStart = 0;
for (var item in newImgData) {
//console.log(leftH, rightH, newImgData[item].h);
//console.log(leftH <= rightH);
if (leftH <= rightH){
resultsList.listL[leftStart] = oldData[item];
leftStart ++;
leftH += newImgData[item].h;
}else{
resultsList.listR[rightStart] = oldData[item];
rightStart ++;
rightH += newImgData[item].h;
}
}
callback(resultsList , leftH, rightH);
}
index.wxss中
.get_pubu_img{ display: none;}
index.wxml中
<!--瀑布流所需,图片显示前用来获取图片等宽时的高度-->
<view class='get_pubu_img'>
<image wx:for="{{pubuliuNewArrData}}" mode='widthFix' data-key='{{index}}' bindload='pubuImgLoad' src="{{item.src}}" />
</view>
<view class="li_box">
<view class="li_l">
<block wx:for="{{pubuliuResultsList.listL}}">
<navigator class="li" hover-class="none" url="">
</navigator>
</block>
</view>
<view class="li_r">
<block wx:for="{{pubuliuResultsList.listR}}">
<navigator class="li" hover-class="none" url="">
</navigator>
</block>
</view>
</view>
index.js中
var app = getApp();
var leftHstart = 0, rightHstart = 0; //加载下页瀑布流数据时,前面数据的左右盒子高度
var newImgData = []; //处理瀑布流所需变量
var canLoadNextPage = false;
index.js中加处理方法
//初始化 / 清空 页面数据(页面加载时、筛选数据加载第一页时 调用)
initFun: function () {
let This = this;
leftHstart = 0, rightHstart = 0; //加载下页瀑布流数据时,前面数据的左右盒子高度
newImgData = []; //处理瀑布流所需变量
This.setData({
pageSize: 1, //页码
pubuliuNewArrData: '',
pubuliuResultsList: '',
});
},
/*
瀑布流相关处理:
1、处理最新加载的瀑布流数据中图片,先显示,再根据 bindload 获取 并 存储 与 原来KEY 相对应的 等宽情况下的高度 数组
=> newImgData[key].h (key 与最新加载的JSON数据的 key 相同)
2、根据所有图片加载完成后,调用app.js中方法,设置左、右两边数据
*/
pubuImgLoad: function (e) {
let This = this;
let inListIndex = e.currentTarget.dataset.key;
//console.log(e.detail.width);
//console.log(inListIndex);
newImgData[inListIndex] = {};
newImgData[inListIndex].h = (300 / e.detail.width) * e.detail.height;
if (newImgData.length == This.data.pubuliuNewArrData.length) {
//防止最后一个数据中的图片先加载完成,这样lenth也相等
for (let i = 0; i < newImgData.length; i++) {
if (!newImgData[i]) {
return;
}
}
//newImgData 获取的最新数据 - newImgData[key].h (key 与最新加载的JSON数据的 key 相同)
//This.data.pubuliuNewArrData 获取的最新数据(处理过的数组) - This.data.pubuliuNewArrData[key]. (key 与最新加载的JSON数据的 key 相同)
//leftHstart 本次数据加载 前 的 左 边高度
//rightHstart 本次数据加载 前 的 右 边高度
app.setCurResultsPubuImgData(newImgData, This.data.pubuliuNewArrData, leftHstart, rightHstart, function (pubuliuResultsList, leftH, rightH) {
//console.log(pubuliuResultsList);
leftHstart = leftH;
rightHstart = rightH;
if (This.data.pubuliuResultsList) {
pubuliuResultsList.listL = This.data.pubuliuResultsList.listL.concat(pubuliuResultsList.listL);
pubuliuResultsList.listR = This.data.pubuliuResultsList.listR.concat(pubuliuResultsList.listR);
}
This.setData({
pubuliuResultsList: pubuliuResultsList,
pubuliuNewArrData: '',
});
setTimeout(function () {
canLoadNextPage = true;
}, 500);
})
}
},
index.js中加载列表数据
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let This = this;
This.initFun(); //初始化 / 清空 页面数据
This.getListData(); //获取页面列表数据
},
//滚动到底部加载更多
onReachBottom: function () {
let This = this;
if (This.data.ifHaveMore) {
//console.log('加载一下页');
if (!canLoadNextPage) {
return;
}
newImgData = [];
This.setData({
pubuliuNewArrData: '',
pageSize: This.data.pageSize + 1
});
This.getListData(); //获取页面列表数据
}
},
//获取页面列表数据
getListData: function () {
let This = this;
wx.showLoading({
title: '加载中',
})
//查询数据 所需参数
let dataJson = {
page: This.data.pageSize, //页码
}
/*test*/
let res = {
status: 1,
ifHaveMore: This.data.pageSize > 2 ? false : true, //是否还有下一页
list: {
0: {
id: '001',
title: This.data.pageSize + '页1111111',
userhead: 'https://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg',
nickname: '昵称昵称昵称111',
zannum: 88,
ifzan: true,
src: "https://img.t.sinajs.cn/t5/skin/public/profile_cover/001_s.jpg?version=b97b8caee54a6c78",
linkUrl: '/pages/home/index'
},
1: {
id: '002',
title: This.data.pageSize + '页222222222222',
userhead: 'https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg',
nickname: '昵称昵称昵称222',
zannum: 88,
ifzan: false,
src: "https://img2018.cnblogs.com/news/24442/201902/24442-20190214124232223-959977867.jpg",
linkUrl: '/pages/home/index'
},
2: {
id: '003',
title: This.data.pageSize + '页33333333333333',
userhead: 'https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg',
nickname: '昵称昵称昵称333',
zannum: 88,
ifzan: false,
src: "https://s3.ifanr.com/wp-content/uploads/2018/08/211.jpg!720",
linkUrl: '/pages/home/index'
},
3: {
id: '004',
title: This.data.pageSize + '页44444444444444',
userhead: 'https://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg',
nickname: '昵称昵称昵称444',
zannum: 88,
ifzan: true,
src: "https://t1.hddhhn.com/uploads/tu/201512/14/87.jpg",
linkUrl: '/pages/home/index'
},
}
}
if (res.status == 1) {
This.setData({
ifHaveMore: res.ifHaveMore, //是否还有下一页
pubuliuNewArrData: app.setCurNewPubuImgData(res.list) //处理设置最新获取到的瀑布流数据
});
}
setTimeout(function () {
wx.hideLoading();
}, 1000)
/*test*/
return;
//请求获取数据
wx.request({
url: '获取列表数据', //仅为示例,并非真实的接口地址
data: dataJson,
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
wx.hideLoading();
}
})
},