實現目標

1. 完成類京東商城的推薦列表，實現類似的非對稱雙列瀑布流效果
2. 下拉列表到底部後可以加載新的商品
3. 點擊商品卡片右上角後，全局遮罩層且顯示減少推薦對話框

需要實現效果如下：

實現效果

用到的額外拓展

UI: Vant-Weapp

具體實現思路

非對稱瀑布流雙列列表實現思路

主要使用absolute定位，根據數據列表元素的高度，計算每個元素絕對定位的top和left以及容器元素的總高度，從而達到非對稱瀑布列的實現。而商品卡片元素的高度，主要取決於兩部分：由商品卡片的圖片高度，還有商品描述元素的高度組成。

本次主要計算圖片的高度(使用接口wx.getImageInfo)，描述元素的高度統一為100rpx。 圖片我設置為根據寬度自適應，而元素的寬度我設置為了固定值350rpx,只需要通過計算寬高比，得出圖片真實展現的高度，從而計算出每個元素的高度，加上間隔距離，可以得出每個元素的 top 值

瀑布流實現

數據格式：

```js listData:[ { imageUrl: '...', top: '0rpx', left: '0rpx' } ]

``` 核心代碼：

js async init(arr) { if(!arr.length) return; let leftTop = 0; // 左邊列表當前元素的top let rightTop = 0; // 右邊列表當前元素的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, 通過寬高比計算出圖片實際展示的高度 const realWidth = 350; // 100為商品描述元素的高度 const realHeight = res.height * (realWidth / res.width) + 100; temp[i].realHeight = `${Math.floor(realHeight)}rpx`; // i為單數為右邊列，為偶數則為左邊的一列 if(i % 2) { temp[i].top = `${Math.ceil(rightTop)}rpx`; // 賦值當前的top值 temp[i].left = "380rpx"; //列表padding-left: 15rpx, 元素寬度350rpx,兩列間隔15rpx,總計380rpx // 更新下一個元素的top值，15為上下元素的間隔 rightTop = rightTop + (realHeight + 15); } else { //設置左列top值 temp[i].top = `${Math.ceil(leftTop)}rpx`; // 離屏幕邊緣一點空間 temp[i].left = "15rpx"; // 更新下一個元素的top值，15為上下元素的間隔 leftTop = leftTop + realHeight + 15; } resolve(); } }) }) } // 獲取左右兩列最大高度，更新容器高度，100 為預留空間 const maxHeight = Math.max(leftTop,rightTop) + 100; this.setData({ insideData: temp, // 更新數據 height: `${Math.ceil(maxHeight)}rpx` // 更新容器高度 }) },

無限加載的實現思路

利用Page組件onReachBottom接口監聽，到達底部時觸發加載。可以通過Page下的json文件設置onReachBottomDistance的值來確定觸發該接口的距離。

總結

對話框下一篇文章實現