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

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

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

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

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

接下来我们使用这两个 API 来实现一个需求：
当用户点击按钮时，小程序会发送请求获取数据，在发送请求过程中需要显示 loading 提示框，同时给用户文字提示；当数据请求完成之后，关闭 loading 提示框；

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

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

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 中添加下面代码：

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

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

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