微信小程序实现下拉加载更多商品

这里我将以 Markdown 格式进行详细讲解“微信小程序实现下拉加载更多商品”的完整攻略，主要包含以下几个步骤：

1. 在页面中使用 scroll-view 接管滚动事件
2. 在 scroll-view 上绑定触底事件
3. 发送网络请求获取数据
4. 将数据渲染到页面上
5. 每次加载数据时更新分页参数，避免重复请求

以下是完整的实现过程：

步骤一：使用 scroll-view 接管滚动事件

在需要实现下拉加载更多的页面中，我们需要使用 scroll-view 来接管滚动事件。将需要展示的数据放在 scroll-view 中，并设置 scroll-view 的高度。

<scroll-view scroll-y="true" style="height: 100%">
  <!-- 商品列表 -->
  <view class="goods-list">
    <!-- 商品列表项 -->
    <view class="goods-item" wx:for="{{goodsList}}">
      <!-- 商品图片 -->
      <image class="goods-image" src="{{item.image}}"></image>
      <!-- 商品名称 -->
      <text class="goods-title">{{item.title}}</text>
      <!-- 商品价格 -->
      <text class="goods-price">¥{{item.price}}</text>
    </view>
  </view>
</scroll-view>

步骤二：在 scroll-view 上绑定触底事件

在 scroll-view 标签上绑定 onReachBottom 事件，当用户滚动到页面底部时，触发该事件，用来加载更多数据。

<scroll-view scroll-y="true" style="height: 100%" bindscrolltolower="loadMore">
  <!-- 商品列表 -->
  <view class="goods-list">
    <!-- 商品列表项 -->
    <view class="goods-item" wx:for="{{goodsList}}">
      <!-- 商品图片 -->
      <image class="goods-image" src="{{item.image}}"></image>
      <!-- 商品名称 -->
      <text class="goods-title">{{item.title}}</text>
      <!-- 商品价格 -->
      <text class="goods-price">¥{{item.price}}</text>
    </view>
  </view>
</scroll-view>

步骤三：发送网络请求获取数据

在 loadMore 方法中，使用 wx.request 发送网络请求，获取更多的商品数据。在请求参数中，需要将当前的页码和每页显示的数量传递给后台接口。

loadMore: function() {
  if (this.data.isLoading) {
    return;
  }
  wx.showLoading({
    title: '正在加载中...',
  })
  let page = this.data.page + 1;
  let size = this.data.size;
  wx.request({
    url: 'http://xxx.com/api/goods',
    data: {
      page: page,
      size: size
    },
    success: (res) => {
      wx.hideLoading();
      let newList = res.data.data;
      if (newList.length === 0) {
        this.setData({
          noMore: true,
          isLoading: false
        })
        return;
      }
      let list = this.data.goodsList.concat(newList);
      this.setData({
        page: page,
        goodsList: list,
        isLoading: false
      })
    },
    fail: (res) => {
      wx.hideLoading();
      wx.showToast({
        title: '加载失败，请稍后再试',
        icon: 'none'
      })
    }
  })
}

步骤四：将数据渲染到页面上

在数据请求成功后，将获取到的商品列表数据渲染到页面上。

success: (res) => {
  wx.hideLoading();
  let newList = res.data.data;
  if (newList.length === 0) {
    this.setData({
      noMore: true,
      isLoading: false
    })
    return;
  }
  let list = this.data.goodsList.concat(newList);
  this.setData({
    page: page,
    goodsList: list,
    isLoading: false
  })
}

步骤五：每次加载数据时更新分页参数

在请求成功后，需要更新当前的页码，以便下一次请求的时候可以获取到下一页的数据。如果不更新当前的页码，会导致重复请求同一页的数据。

this.setData({
  page: page,
  goodsList: list,
  isLoading: false
})

另外可以给 loadMore 方法添加一个布尔类型变量 isLoading，用来控制每次只能请求一次数据。

loadMore: function() {
  if (this.data.isLoading) {
    return;
  }
  this.setData({
    isLoading: true
  })
  // 发送网络请求和渲染数据的代码
}

上面的步骤就是微信小程序实现下拉加载更多商品的完整攻略。

以下是两条示例说明：

示例一：每次加载新增数据

在每次请求到新数据时，将新数据和原有的数据进行拼接，从而实现下拉加载更多的效果。

let newList = res.data.data;
let list = this.data.goodsList.concat(newList);
this.setData({
  goodsList: list
})

示例二：每次替换原有数据

在每次请求到新数据时，将新数据直接替换原有的数据，从而实现每次刷新的效果。

let newList = res.data.data;
this.setData({
  goodsList: newList
})