微信小程序弹框

官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

有四种弹框的方式:toast,modal,loading,actionSheet

wxml页面












js文件

1. toast
handleShowToast(){
  wx.showToast({
    title: '添加成功',  // 必填,弹框内容
    duration: 3000,   // 间隔时间
    icon: "loading",  // 图标:loading success none
    image: "/assets/tabbar/cart.png",  // 自定义图标
    mask: true, // 蒙版效果,之后就不能操作蒙版之下的东西了
    success: function(){},
    fail: function(){},
    complete: function(){
      console.log("hfjka");
    }, // 点击完成之后,就会调用
  })
},

2. modal
handleShowModal(){
  wx.showModal({
    title: '成功',  // 必填
    content: '点击确定来进行下一步操作',  // 必填
    showCancel: false, // 需求:不显示取消按钮了
    cancelText: "退出", // 将取消按钮的文字修改掉
    cancelColor: "red", // 取消按钮的颜色
    success: function(res){  // 点击了取消或者确定,才会调用此函数
      console.log(res);
      if(res.cancel){
        // 一般取消了就啥也不做
        console.log("用户点击了取消按钮");
      }else if(res.confirm){
        // 一般确定了就进行下一步操作
        console.log("用户点击了确定按钮");
      }
    } 
  })
},

3. loading
handleShowLoading(){
  wx.showLoading({
    title: '加载中',
    mask: true,
  })

  setTimeout(function(){
    wx.hideLoading(); // 隐藏loading,必须手动调用才能消失
  }, 3000)
},

4. actionSheet,从底部弹出
handleShowAction(){
  wx.showActionSheet({
    itemList: ["相册","手机","图片"],
    itemColor: "red",
    success: function(res){
      console.log(res);
      switch (res.tapIndex){  // 获取到点击的哪一个
        // case 0: 
        // .....
      }
    }
  })
}

showLoading和showToast的区别:
showLoading不会主动消失,得调用hideLoading才会消失。一般向服务器发送请求的时候才会调用这个。

系统弹窗API
showToast
showModal
showLoading
showActionSheet

你可能感兴趣的:(微信小程序弹框)