第11课 微信小程序多种弹窗提示样式

第11课 微信小程序弹窗提示样式：

1. 消息提示：
   wx.showToast(Object object)
2. 关闭消息提示：
   wx.hideToast(Object object)

4. 弹窗选框提示：
   wx.showModal(Object object)

5. 加载提示：
   wx.showLoading(Object object)
6. 关闭加载提示：
   wx.hideLoading(Object object)

7. 显示操作菜单：
   wx.showActionSheet(Object object)

消息提示：

wx.showToast(Object object)

Page({
  //生命周期函数 页面加载时触发
  onLoad: function (options) {
    wx.showToast({
      title: '成功',    //显示的标题
      icon: 'success',  //显示的图标
      duration: 2000    //显示的时间2s
    })
  }
})

效果图如下：

弹窗选框提示：

wx.showModal(Object object)

Page({
  //生命周期函数 页面加载时触发
  onLoad: function (options) {
    wx.showModal({
      title: '警告',
      content: '是否确定删除此内容',
      cancelText:'取消',
      confirmText:'确定',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定时在这里面删除')
        } else if (res.cancel) {
          console.log('用户点击取消啥也不敢')
        }
      }
    })
  }
})

效果图如下：

加载提示：

wx.showLoading(Object object)

Page({
  //生命周期函数 页面加载时触发
  onLoad: function (options) {
    //开启提示弹窗
    wx.showLoading({
      title: '加载中...',
    })
    //定时2s 后关闭加载
    setTimeout(function () {
      wx.hideLoading()  //关闭提示
    }, 2000)
  }
})

加载样式效果如下：

显示操作菜单：

wx.showActionSheet(Object object)

Page({
  //生命周期函数 页面加载时触发
  onLoad: function (options) {
    wx.showActionSheet({
      itemList: ['收藏', '下载', '分享'],
      success(res) {
        console.log(res.tapIndex) //打印点击了谁
      },
      fail(res) { //点击取消执行
        console.log(res.errMsg) 
      }
    })
  }
})

效果图如下：