微信小程序：背包商城（一） 首页 仿京东APP 非对称瀑布流和无限加载列表的实现

实现目标

1. 完成类京东商城的推荐列表，实现类似的非对称双列瀑布流效果
2. 下拉列表到底部后可以加载新的商品
3. 点击商品卡片右上角后，全局遮罩层且显示减少推荐对话框

需要实现效果如下：

非对称瀑布流列表

实现效果

实现瀑布流.jpg

用到的额外拓展

UI: Vant-Weapp

具体实现思路

非对称瀑布流双列列表实现思路

主要使用absolute定位，根据数据列表元素的高度，计算每个元素绝对定位的top和left以及容器元素的总高度，从而达到非对称瀑布列的实现。而商品卡片元素的高度，主要取决于两部分：由商品卡片的图片高度，还有商品描述元素的高度组成。

本次主要计算图片的高度(使用接口wx.getImageInfo)，描述元素的高度统一为 100rpx 。
图片我设置为根据宽度自适应，而元素的宽度我设置为了固定值350rpx,只需要通过计算宽高比，得出图片真实展现的高度，从而计算出每个元素的高度，加上间隔距离，可以得出每个元素的 top 值。

瀑布流实现

数据格式：

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

核心代码：

 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的值来确定触发该接口的距离。

总结

对话框下一篇文章实现