微信小程序的弹框toast

https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html

success的toast

示例一：

wxml:

<toast hidden="{{toastHidden}}" duration="1000" bindchange="onToastChanged">    
        {{toastText}}    
toast>   

.js

Page({
  data: {
    toastHidden: true, //吐司  
    toastText: '',//吐司文本  
  },
  onToastChanged: function () {
    this.setData({
      toastHidden: true
    });
  },
  onLoad: function () {
    this.setData({
      toastHidden: false, //吐司  
      toastText: '我是吐司',//吐司文本  
    })
  }
})  

duration：显示时间
hidden：是否隐藏
bindchange：duration时长后触发

效果图：

示例二：

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

效果图：

加载的toast

示例一：

wx.showToast({
    title: '加载中...',
    icon: 'loading',
    duration: 1000,
    mask: true
})

效果图：

示例二：

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

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

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

效果图：

没有icon的简单toast

wx.showToast({
    title: '这是一条没有icon的toast',
    icon: 'none',
    duration: 1000,
    mask: true
})

效果图：

有内容的弹框：

wx.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
})

有列表选择的弹框

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

效果图：