小程序开发-微信小程序的各种弹窗

小程序开发-微信小程序的各种弹窗

小程序开发-微信小程序的各种弹窗

作者: 路羽

网络资源原创分享网站

小程序开发-微信小程序的各种弹窗手机扫码查看

路羽资源博客 资源分享www.luyuz.cn

微信小程序开发时各种弹窗提示


小程序的弹窗效果不仅只有七种形式,以下只是简单列举下。


小程序开发-微信小程序的各种弹窗



1、纯文本提示

   wx.showToast({
      title: '纯文字弹窗',
      icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
      duration: 2000     
    })  


2、取消确认提示
 wx.showModal({
      title: 'confirm的弹窗',
      content: '确认要删除该项吗?',
      success: function (res) {
        if (res.confirm) {  
          console.log('点击确认回调')
        } else {   
          console.log('点击取消回调')
        }
      }
    })

3、成功提示
wx.showToast({
      title: '成功提示弹窗',
      icon: '',     //默认值是success,就算没有icon这个值,就算有其他值最终也显示success
      duration: 2000,      //停留时间
    })

4、自定义图标弹窗
 wx.showToast({
      title: '自定义图标弹窗',
      image: '../../static/image/icon.png',  //image的优先级会高于icon
      duration: 2000     
    })

5、加载中提示

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

6、带蒙层的弹窗
wx.showToast({
      title: '带蒙层的弹窗',     
      duration: 2000,    
      mask:true    //是否有透明蒙层,默认为false 
                   //如果有透明蒙层,弹窗的期间不能点击文档内容 
    })


7、有列表弹窗
wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function (res) {
        console.log(res);
      }
    })

分享到:
打赏
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽资源博客
原文地址: 《小程序开发-微信小程序的各种弹窗》 发布于2021-2-21

评论

  1. #1
    慕擎 游客 Lv.1

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册