小程序API —— 51小程序界面交互 - loading 提示框

然后就去远行吧2025-03-20 9:23

小程序提供了一些用于界面交互的 API，例如 loading 提示框、消息提示框、模态对话框等 API；

loading 提示框常配合网络请求来使用，用于提高用户体验，对应的 API 有两个：

wx.showLoading() 显示 loading 提示框；
wx.hideLoading() 关闭 loading 提示框；

注意 loading 提示框显示之后不会自动关闭，必须主动调用 hideLoading 方法才能关闭 loading 提示框；

接下来我们使用这两个 API 来实现一个需求：

当用户点击按钮时，小程序会发送请求获取数据，在发送请求过程中需要显示 loading 提示框，同时给用户文字提示；当数据请求完成之后，关闭 loading 提示框；

下面打开微信开发者工具来实现这个需求：

在 pages/cate/cate.js 中添加下面代码：

javascript 复制代码

Page({

  data: {
    list: []
  },
  getData(){

    // 显示 loading 提示框
    wx.showLoading({
      // title 用来显示提示的内容
      // 提示的内容不会自动换行，如果提示的内容比较多，超出行的内容会被隐藏
      title: '数据正在加载中...',
      // 是否展示透明蒙层，防止触摸穿透，true 表示隐藏
      mask: true
    })

    // 发起网络请求，需要使用 wx.request API
    wx.request({
      // 接口地址
      url: 'https://gamll-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方式
      method: 'GET',
      // 请求参数
      data: {},
      // 请求头
      header: {},
      // API 调用成功以后，执行的回调
      success: (res) => {
        if(res.data.code === 200){
          this.setData({
            list: res.data.data
          })
        }
      },
      // API 调用失败以后，执行的回调
      fail: (err) => {
        console.log(err);
      },
      // API 不管调用成功还是失败，都会执行的回调
      complete: (res) => {
        // console.log(res)

        // 关掉 loading 提示框
        wx.hideLoading()
      }
    })
  }
})

在 pages/cate/cate.wxml 中添加下面代码：

html 复制代码

<button type="warn" bind:tap="getData">获取数据</button>

编译运行，点击按钮的时候，可以发现出现了 loading 提示框，如下：

参考视频：尚硅谷微信小程序开发教程