探索非对称瀑布流和无限加载的奥秘：打造类京东微信小程序

小程序已成为电商领域的宠儿，微信小程序更是不遑多让。打造一款类京东的小程序，不仅能满足用户需求，还能增强品牌影响力。而实现非对称瀑布流和无限加载列表，更是小程序锦上添花的功能。

非对称瀑布流：视觉盛宴

瀑布流布局已广泛应用于电商、资讯等领域，其错落有致的排列方式，能有效提升视觉吸引力。非对称瀑布流在此基础上更进一步，打破了传统瀑布流的单调性，赋予其更多灵动感和层次感。

在微信小程序中实现非对称瀑布流，需要巧妙运用 CSS 布局和 Flexbox 技术。通过设置不同宽度的瀑布流列，错落有致地排列商品卡片，就能营造出赏心悦目的视觉效果。

无限加载：畅快体验

用户在浏览商品列表时，最怕的就是频繁刷新页面或点击加载更多按钮。无限加载功能，让用户无需任何手动操作，就能在滑动到底部时自动加载新商品。

实现无限加载的关键在于监听页面滚动事件，当页面滚动接近底部时，触发加载新数据的请求。小程序提供了 wx.request() 方法，用于发送网络请求，获取新商品数据。通过动态渲染列表，就能实现无限加载效果。

全局遮罩层：便捷操作

在商品列表中，用户经常需要进行一些操作，比如添加购物车、收藏等。为了避免遮挡商品卡片，可以采用全局遮罩层的方式，在操作时浮出一层半透明的遮罩，方便用户交互。

小程序的 wx.showModal() 方法，能轻松实现全局遮罩层的创建。通过设置 showCancel 为 false，即可隐藏取消按钮，避免用户误操作。

技术指南

1. 非对称瀑布流

.waterfall-list {
  display: flex;
  flex-wrap: wrap;
}

.waterfall-item {
  width: calc(50% - 12px);
  margin: 6px;
}

@media (min-width: 768px) {
  .waterfall-item {
    width: calc(33.33% - 12px);
  }
}

2. 无限加载

const page = this;

Page({
  data: {
    page: 1,
    loading: false,
    goodsList: [],
  },

  onLoad() {
    this.getGoodsList();
  },

  onReachBottom() {
    if (this.data.loading) return;

    this.setData({ loading: true });

    this.getGoodsList();
  },

  getGoodsList() {
    const page = this.data.page;

    wx.request({
      url: '...',
      data: { page },
      success: (res) => {
        const goodsList = this.data.goodsList.concat(res.data.data);

        this.setData({
          goodsList,
          loading: false,
          page: page + 1,
        });
      },
    });
  },
});

3. 全局遮罩层

const page = this;

Page({
  showModal() {
    wx.showModal({
      title: '提示',
      content: '...',
      showCancel: false,
    });
  },
});

SEO优化