小程序学习笔记：加载效果、上拉加载与节流处理

在微信小程序开发过程中，优化用户体验是非常重要的一环。今天我们就来分享如何在小程序中实现加载提示效果、上拉触底加载下一页数据以及对上拉触底事件进行节流处理，让你的小程序更加流畅和高效。

一、添加 loading 提示效果

在小程序中，当发起网络请求获取数据时，为了避免用户在等待过程中感到困惑，通常会添加一个 loading 提示效果，告知用户数据正在加载。

实现思路

在发送请求前展示 loading 效果，请求完成（无论成功还是失败）后隐藏 loading 效果。我们可以使用微信小程序提供的wx.showLoading和wx.hideLoading方法来实现。

代码实现

假设我们有一个getShopList函数用于获取商品列表数据，在该函数内部添加 loading 效果的代码如下：

Page({
  getShopList: function() {
    // 展示loading效果
    wx.showLoading({
      title: '数据加载中...',
    });
    // 模拟网络请求，实际开发中这里是真实的请求代码
    setTimeout(() => {
      // 请求完成，隐藏loading效果
      wx.hideLoading();
    }, 2000);
  }
});

在上述代码中，wx.showLoading方法用于展示 loading 效果，传入一个包含title属性的对象，用于设置 loading 提示的文本内容。当请求完成后（这里使用setTimeout模拟请求过程），调用wx.hideLoading方法隐藏 loading 效果。

二、上拉触底加载下一页数据

为了提升用户浏览体验，很多小程序会采用上拉触底加载下一页数据的方式，避免一次性加载大量数据造成性能问题。

实现步骤

1. 配置上拉触底距离：在页面的配置文件（如shoppingList.json）中新增一个属性节点reachBottomDistance，设置上拉触底的距离，比如设置为200像素。

{
  "reachBottomDistance": 200
}

1. 在触底事件中增加页码值：在页面的js文件中找到onReachBottom事件处理函数，在函数内部让页码值自增。假设页码值存储在data中的page字段，代码如下：

Page({
  data: {
    page: 1
  },
  onReachBottom: function() {
    this.setData({
      page: this.data.page + 1
    });
  }
});

1. 重新调用获取数据方法：在页码值自增后，重新调用获取商品列表数据的方法getShopList，并传入更新后的页码值，以便获取下一页数据。完整代码如下：

Page({
  data: {
    page: 1
  },
  getShopList: function(page) {
    // 模拟网络请求，实际开发中这里是真实的请求代码
    console.log(`获取第${page}页数据`);
  },
  onReachBottom: function() {
    this.setData({
      page: this.data.page + 1
    });
    this.getShopList(this.data.page);
  }
});

三、上拉触底事件的节流处理

在网络速度较慢的情况下，用户频繁上拉触底可能会导致连续发起多次请求，加重服务器负担，同时也会影响用户体验。这时就需要对触底事件进行节流处理。

实现思路
通过设置一个节流阀（例如isLoading）来控制请求的发送。当节流阀为false时，表示可以发起请求，发起请求后将节流阀设置为true；当请求完成（无论成功还是失败）后，再将节流阀设置为false。在触底事件中，首先判断节流阀状态，如果为true，则不进行后续操作，等待当前请求完成。

代码实现

Page({
  data: {
    page: 1,
    isLoading: false
  },
  getShopList: function(page) {
    this.setData({
      isLoading: true
    });
    // 模拟网络请求，实际开发中这里是真实的请求代码
    setTimeout(() => {
      console.log(`获取第${page}页数据`);
      this.setData({
        isLoading: false
      });
    }, 2000);
  },
  onReachBottom: function() {
    if (this.data.isLoading) {
      return;
    }
    this.setData({
      page: this.data.page + 1
    });
    this.getShopList(this.data.page);
  }
});

在上述代码中，getShopList函数在开始请求时将isLoading设置为true，请求完成后设置为false。onReachBottom事件处理函数在触发时首先判断isLoading状态，如果为true则直接返回，避免重复请求。