微信小程序弹窗说明

1-最常用的加载防止服务器数据没有回调完成出发小程序页面!

 wx.showLoading({title:'加载中',mask:true})//开始

 wx.hideLoading()//完毕

2-显示消息提示框

  wx.showToast({
     title: '内容', //提示的内容
     duration: 2000, //持续的时间
     icon: 'loading', //图标有success、error、loading、none四种
     mask: true //显示透明蒙层 防止触摸穿透
  })

3-需要确认弹窗

  wx.showModal({
    title: '我是标题', //提示的标题
    content: '我是内容', //提示的内容
    success: function(res) {
      if(res.confirm) {
        console.log('用户点击了确定')
      } else if (res.cancel) {
        console.log('用户点击了取消')
      }
    }
  })

4-选项弹窗

 wx.showActionSheet({
   itemList:['选项一','选项二','其它'], //文字数组
   success: (res) => {
     switch(res.tapIndex) {
       case 0:
         console.log('点击了 选项一')
         break;
       case 1:
         console.log('点击了 选项二')
         break;	
       case 2:
         console.log('点击了 其它选项')
         break;
     }
   },
   fail (res) {
     console.log('取消选项')
   }
 })

5-弹窗完成后操作事件弹窗


           wx.showToast({
             title: '提交成功',
             icon: 'success',    //如果要纯文本,不要icon,将值设为'none'
             duration: 2000,
             mask:true,//是否显示透明蒙层,防止触摸穿透,默认:false 
             success:function(){
                 setTimeout(function () { 
                      wx.navigateBack({ 
                        delta: 1 //返回上一级页面
                      });    
                 }, 2500);
             }   
           })  

猜你喜欢

转载自blog.csdn.net/munchmills/article/details/130742275
今日推荐