微信小程序的提示框 showToast 和 showLoading

小灰灰 2022-05-23 22:16 821阅读 0赞

用户操作得到即时反馈，这是很好的用户体验，所以我们经常会使用提示框来反馈一些简短信息。提示框显示后，通常自己关闭，对用户的打扰降到最低。下面简单对比一下常用两个显示对话框方式：

<table style="width:200px;"> showToast 和 showLoading 
 <tbody> 
 <tr> 
 <th>&nbsp;</th> 
 <th style="text-align:center;"> wx.showToast() </th> 
 <th style="text-align:center;"> wx.showLoading() </th> 
 </tr> 
 </tbody> 
 <tbody> 
 <tr> 
 <td>参数</td> 
 <td> title icon image duration mask </td> 
 <td> title mask </td> 
 </tr> 
 <tr> 
 <td>关闭方法</td> 
 <td> 设置duration，定时关闭； 使用wx.hideToast()关闭 </td> 
 <td>只能用wx.hideLoading()关闭</td> 
 </tr> 
 <tr> 
 <td>icon</td> 
 <td> success loading none </td> 
 <td>固定显示加载icon</td> 
 </tr> 
 </tbody> 
</table>

showToast 举例：

wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })

showLoading 举例，在发起网络请求前显示“加载中...”，在结束时关闭信息：

wx.showLoading({
      title: '加载中...',
    })
    
    wx.request({
      url: ...,
      ...,
      success: (res) => {
      },
      fail: () => {},
      complete: () => {
        wx.hideLoading()
      }
    })

这里是微信官方文档：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.showToast.html]

[https_developers.weixin.qq.com_miniprogram_dev_api_wx.showToast.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html