微信小程序开发实战：添加 loading 提示效果与上拉触底节流处理

阿贾克斯ajax0322

1511人浏览 · 2025-01-25 23:29:41

阿贾克斯ajax0322 · 2025-01-25 23:29:41 发布

在微信小程序开发过程中，为了提升用户体验，常常需要添加一些交互效果，比如 loading 提示效果，以及对上拉触底进行节流处理，避免频繁请求数据。今天，就带大家详细了解这两个功能的实现方法。

一、添加 loading 提示效果

（一）实现原理

微信小程序提供了官方的 API 来实现 loading 提示效果。通过调用wx.showLoading方法，可以在页面中间显示一个 loading 提示框，该提示框不会自动关闭，需要调用wx.hideLoading方法手动关闭。同时，wx.showLoading方法接收一个配置对象object，其中title是必填参数，用于设置提示内容。

（二）代码实现步骤

打开微信小程序开发文档：打开微信开发者工具，在菜单栏中找到 “帮助”，点击 “开发者文档”，这会自动在浏览器中打开微信小程序的开发文档。接着切换到 “api”，在左侧找到 “界面”，然后在 “界面交互” 里找到wx.showLoading方法。
在项目中添加 loading 效果代码：假设我们有一个getColors方法，在这个方法内部调用request函数发起网络数据请求。在发起请求之前，调用wx.showLoading方法展示 loading 效果，并设置提示标题为 “数据加载中”。代码如下：

getColors() {
  // 展示loading效果
  wx.showLoading({
    title: '数据加载中',
  });
  // 这里省略发起网络请求的代码，假设使用wx.request
  wx.request({
    url: '请求的接口地址',
    success: (res) => {
      // 处理请求成功的逻辑
    },
    complete: () => {
      // 隐藏loading效果
      wx.hideLoading();
    }
  });
}

在上述代码中，wx.request的complete回调函数用于在请求完成后（无论成功还是失败）隐藏 loading 效果，确保用户体验的一致性。

（三）效果演示

切换到 “联系我们” 页面，当第一次请求数据时，会看到页面中间出现 “数据加载中” 的 loading 提示框。在数据加载完成后，提示框会自动隐藏，这表明 loading 提示效果已经成功实现。

二、上拉触底节流处理

（一）为什么要进行节流处理

在小程序中，默认情况下，当页面向上拖动触底时会加载下一页数据。但如果用户连续快速触底多次，就会连续请求多页数据，这可能会导致性能问题，比如网络资源浪费、页面卡顿等。所以，需要对上拉触底进行节流处理，避免这种情况发生。

（二）实现步骤

在 data 中定义节流阀：在页面的data中定义一个名为isLoading的节流阀，它是一个布尔值。false表示当前没有进行数据请求，可以发起后续请求；true表示当前正在进行数据请求，需要屏蔽额外的请求。代码如下：

Page({
  data: {
    isLoading: false
  }
})

在 getColors 方法中修改节流阀的值：在getColors方法内部，当方法被调用时，立即将isLoading设置为true，表示正在发起网络数据请求，后续请求需要被屏蔽。当网络请求成功（在complete回调函数中），将isLoading重置为false，表示当前请求已完成，后续请求可以正常发起。代码如下：

getColors() {
  // 开始请求，设置节流阀为true
  this.setData({
    isLoading: true
  });
  wx.request({
    url: '请求的接口地址',
    success: (res) => {
      // 处理请求成功的逻辑
    },
    complete: () => {
      // 请求完成，重置节流阀为false
      this.setData({
        isLoading: false
      });
    }
  });
}

在触底事件中判断节流阀的值：在页面的上拉触底事件（假设事件名为onReachBottom）中，在发起数据请求之前，先判断isLoading的值。如果为true，直接return，不进行任何操作；如果为false，则可以发起数据请求。代码如下：

Page({
  onReachBottom() {
    if (this.data.isLoading) {
      return;
    }
    // 发起数据请求，例如调用getColors方法
    this.getColors();
  }
})

（三）效果演示

切换到 “联系我们” 页面，进行上拉触底操作。当连续快速触发上拉触底时，只会获取到第二页的数据，不会获取第三页和第四页的数据。这是因为在连续触发时，isLoading的值变为true，后续请求被return掉了。只有当当前请求完成，isLoading重新被设置为false后，再次上拉触底才能发起后续请求，从而有效避免了频繁请求数据的问题。

通过以上步骤，我们成功在微信小程序中实现了 loading 提示效果和上拉触底节流处理，这些技巧能够显著提升小程序的用户体验和性能。希望大家在实际开发中熟练运用，打造出更加优质的小程序。