微信小程序实现自定义加载图标功能

当用户打开微信小程序时，可能会需要等待一些时间才能正常使用，这时候就需要一个加载状态显示，方便用户知道正在加载中，不会误以为是小程序出了问题。本文就来详细介绍微信小程序实现自定义加载图标功能的完整攻略。

当用户打开微信小程序时，可能会需要等待一些时间才能正常使用，这时候就需要一个加载状态显示，方便用户知道正在加载中，不会误以为是小程序出了问题。本文就来详细介绍微信小程序实现自定义加载图标功能的完整攻略。

1. 自定义加载图标

微信小程序提供了默认的加载图标，但是我们也可以通过定义自己的加载图标来提供更好的用户体验。

一般加载图标都是使用 gif、svg、png 等图形格式来实现，我们需要选择一种图片格式，并且把图片放到项目中的某个目录下。

比如说，我们可以把加载图标放到 images/loading.gif，在小程序的全局样式中定义 loading 样式并设置 background 图片属性，如下:

/* app.wxss */
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(images/loading.gif) no-repeat center center;
  background-size: 60px;
  z-index: 9999;
}

在我们需要显示加载图标的地方，比如一个请求数据的按钮按钮，我们在请求数据时添加 loading 类名，如下所示:

<!-- index.wxml -->
<button class="my-button" bindtap="getData">请求数据</button>

// index.js
Page({
  getData() {
    wx.showLoading({
      title: '加载中', // 对话框上方的标题文本
      mask: true, // 是否显示透明蒙层
    })
    // 请求数据
    // 请求数据完毕后，隐藏加载图标
    wx.hideLoading()
  }
})

在请求数据时，我们调用了 wx.showLoading 方法来显示我们之前定义的自定义加载图标，请求完成后再调用 wx.hideLoading 来隐藏加载图标。

2. 利用 wx.request 中 complete 回调函数来实现加载图标

在第一种方式中，我们需要手动调用 wx.showLoading 和 wx.hideLoading 方法来显示和隐藏加载图标，如果我们要在多个地方使用加载图标，就需要写很多重复的代码，非常不方便。

我们可以利用 wx.request 方法中的 complete 回调函数，在请求完成时自动隐藏加载图标，示例代码如下所示:

// index.js
Page({
  getData() {
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    wx.request({
      url: 'https://xxx.com/data',
      success: function(res) {
        console.log(res)
      },
      complete() {
        wx.hideLoading()
      }
    })
  }
})

这种方式比第一种方法更加方便和简洁，可以减少代码的重复，提高开发效率。

总结

本文详细讲解了微信小程序实现自定义加载图标功能的完整攻略，介绍了两种方式来实现加载图标的显示及隐藏。第一种方法需要手动添加和移除类名或调用 wx.showLoading 和 wx.hideLoading 方法，适用于只在少数地方需要加载图标的情况。第二种方法则利用了 wx.request 方法的 complete 回调函数来自动显示或隐藏加载图标，更加方便和简洁。