界面交互~Toast和模态对话框

界面交互

名称	功能说明
wx.showToast	显示消息提示框
wx.showModal	显示模态对话框
wx.showLoading	显示 loading 提示框
wx.showActionSheet	显示操作菜单
wx.hideToast	隐藏消息提示框
wx.hideLoading	隐藏 loading 提示框

 

（1）消息提示框wx.showToast

    在完成某个操作成功之后，我们希望告诉用户这次操作成功并且不打断用户接下来的操作。弹出式提示Toast就是用在这样的场景上，Toast提示默认1.5秒后自动消失，其表现形式如图4-19所示。

​ 图4-19 Toast弹出式提示

小程序提供了显示隐藏Toast的接口，代码示例如下所示。

代码清单4-3 显示/隐藏Toast

Page({
  onLoad: function() {
    wx.showToast({ // 显示Toast
      title: '已发送',
      icon: 'success',
      duration: 1500
    })
    // wx.hideToast() // 隐藏Toast
  }
})

 

代码：

  // showToast
  showToast(){
    wx.showToast({
      title: '成功',
      /*成功后返回主页面*/
      success(){
        wx.switchTab({
          url: '/pages/index/index',
        })
      }, 
      fail(){
        console.log('接口调用失败');
      }
    })
  }

 

（2）模态对话框wx.showModal

    特别要注意，我们不应该把Toast用于错误提示，因为错误提示需要明确告知用户具体原因，因此不适合用这种一闪而过的Toast弹出式提示。一般需要用户明确知晓操作结果状态的话，会使用模态对话框来提示，同时附带下一步操作的指引。

<button 
  class="weui-btn"
  bindtap="showModal"
  type="primary">模态对话框</button>

  // 模态框
  showModal(){
    wx.showModal({
      title: '标题',
      content: '告知当前状态，信息和解决方法',
      confirmText: '主操作',
      cancelText: '次要操作',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击主操作')
        } else if (res.cancel) {
          console.log('用户点击次要操作')
        }
      }
    })
  }

 

 

（3）显示 loading 提示框wx.showLoading

    显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

  

 

注意

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showToast 应与 wx.hideToast 配对使用

 

 

（4）弹出操作菜单wx.showActionSheet

参数

Object object

属性	类型	默认值	必填	说明
itemList	Array.<string>		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
tapIndex	number	用户点击的按钮序号，从上到下的顺序，从0开始

示例代码

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

注意

• Android 6.7.2 以下版本，点击取消或蒙层时，回调 fail, errMsg 为 "fail cancel"；
• Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗，所以尽量避免使用「取消」分支中实现业务逻辑

  效果：

  

 

 

 

 

.