實(shí)現(xiàn)目標(biāo)
1. 完成類京東商城的推薦列表，實(shí)現(xiàn)類似的非對稱雙列瀑布流效果
2. 下拉列表到底部后可以加載新的商品
3. 點(diǎn)擊商品卡片右上角后，全局遮罩層且顯示減少推薦對話框
需要實(shí)現(xiàn)效果如下：
非對稱瀑布流列表
實(shí)現(xiàn)效果
實(shí)現(xiàn)瀑布流.jpg
用到的額外拓展
UI: Vant-Weapp
具體實(shí)現(xiàn)思路
非對稱瀑布流雙列列表實(shí)現(xiàn)思路
主要使用absolute定位，根據(jù)數(shù)據(jù)列表元素的高度，計算每個元素絕對定位的top和left以及容器元素的總高度，從而達(dá)到非對稱瀑布列的實(shí)現(xiàn)。而商品卡片元素的高度，主要取決于兩部分：由商品卡片的圖片高度，還有商品描述元素的高度組成。
本次主要計算圖片的高度(使用接口wx.getImageInfo)，描述元素的高度統(tǒng)一為 100rpx 。
圖片我設(shè)置為根據(jù)寬度自適應(yīng)，而元素的寬度我設(shè)置為了固定值350rpx,只需要通過計算寬高比，得出圖片真實(shí)展現(xiàn)的高度，從而計算出每個元素的高度，加上間隔距離，可以得出每個元素的 top 值。
瀑布流實(shí)現(xiàn)
數(shù)據(jù)格式：
listData:[
{
imageUrl: '...',
top: '0rpx',
left: '0rpx'
}
]
核心代碼：
async init(arr) {
if(!arr.length) return;
let leftTop = 0; // 左邊列表當(dāng)前元素的top
let rightTop = 0; // 右邊列表當(dāng)前元素的top
let temp = JSON.parse(JSON.stringify(arr)); // 序列化列表
for(let i = 0; i < temp.length; ++i) {
// 逐個獲取列表中所有圖片的信息，更新每個元素的高度以及top,left
await new Promise((resolve) => {
wx.getImageInfo({
src: temp[i].imageUrl,
complete: (res) => {
// 圖片我定義為350rpx, 通過寬高比計算出圖片實(shí)際展示的高度
const realWidth = 350;
// 100為商品描述元素的高度
const realHeight = res.height * (realWidth / res.width) + 100;
temp[i].realHeight = `${Math.floor(realHeight)}rpx`;
// i為單數(shù)為右邊列，為偶數(shù)則為左邊的一列
if(i % 2) {
temp[i].top = `${Math.ceil(rightTop)}rpx`; // 賦值當(dāng)前的top值
temp[i].left = "380rpx"; //列表padding-left: 15rpx, 元素寬度350rpx,兩列間隔15rpx,總計380rpx
// 更新下一個元素的top值，15為上下元素的間隔
rightTop = rightTop + (realHeight + 15);
}
else {
//設(shè)置左列top值
temp[i].top = `${Math.ceil(leftTop)}rpx`;
// 離屏幕邊緣一點(diǎn)空間
temp[i].left = "15rpx";
// 更新下一個元素的top值，15為上下元素的間隔
leftTop = leftTop + realHeight + 15;
}
resolve();
}
})
})
}
// 獲取左右兩列最大高度，更新容器高度，100 為預(yù)留空間
const maxHeight = Math.max(leftTop,rightTop) + 100;
this.setData({
insideData: temp, // 更新數(shù)據(jù)
height: `${Math.ceil(maxHeight)}rpx` // 更新容器高度
})
},
無限加載的實(shí)現(xiàn)思路
利用Page組件onReachBottom接口監(jiān)聽，到達(dá)底部時觸發(fā)加載。可以通過Page下的json文件設(shè)置onReachBottomDistance的值來確定觸發(fā)該接口的距離。
總結(jié)
對話框下一篇文章實(shí)現(xiàn)
