《微信小程序开发从入门到实战》学习六十三

6.4 交互API

使用交互API可以在小程序中显示各种弹窗或动画，达到交互反馈的目的。

6.4.1 提示框API

使用wx.showToast接口可显示消息提示框。接口接受Object参。属性如下：

title（必填）        提示的内容

icon                       图标，可选值为success（默认）、loading和none

image                    自定义图标的本地路径，优先级高于icon

duration                提示框的显示时长，单位为毫秒，默认1500

mask                     是否显示透明蒙层，防止触摸穿透

success

fail

complete

示例代码如下：

wx.showToast({

     title: '成功',

     icon:'success',

     duration: 2000

    })

使用wx.hideToast接口可提前关闭消息提示框。该接口接受Object参，支持三回调。

也可使用wx.showLoading接口显示loading提示框，该接口接受Object参，支持的属性包括title（必填）、mask、duration、三回调。当duration未填写时，loading提示框会一直存在，必须主动调用wx.hideLoading接口才能关闭提示框。

示例代码如下： 

    wx.showLoading({

      title: '加载中',

   })

   // 2秒后关闭提示框(通常的做法是在网络请求前显示提示框，然后在complete回调中关闭提示框)

   setTimeout(() => {

     wx.hideLoading()

   },2000)

6.4.2 对话框API

使用wx.showModal接口可显示模态对话框。接口接受Object参。属性如下：

title                       提示的标题

content                 提示的内容

showCancel         是否显示取消按钮，默认true

cancelText            取消按钮的文字，最多四字符，默认取消

cancelColor          取消按钮的文字颜色，默认#000000

confirmText           确认按钮的文字，最多四字符，默认确认

confirmColor         确认按钮的文字颜色，默认#576B95

success

fail

complete

示例代码如下：

   wx.showModal({

    title: '提示',

    content: '这是一个事态弹窗',

    success(res){

     if (res.confirm) {

        console.log('用户单击确定')

     }else if (res.cancel) {

       console.log('用户单击取消')

     }

    },

    complete: (res) => {

      if (res.cancel) {

        

      }

  

      if (res.confirm) {

        

      }

    }

  })