前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序的各种弹窗(微信小程序弹窗怎么关)

小程序的各种弹窗(微信小程序弹窗怎么关)

作者头像
全栈程序员站长
发布2022-08-02 12:51:34
3.9K0
发布2022-08-02 12:51:34
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

1、纯文本提示

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

2、取消确认提示

代码语言:javascript
复制
 wx.showModal({
      title: 'confirm的弹窗',
      content: '确认要删除该项吗?',
      success: function (res) {
        if (res.confirm) {  
          console.log('点击确认回调')
        } else {   
          console.log('点击取消回调')
        }
      }
    })

3、成功提示

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

4、自定义图标弹窗

代码语言:javascript
复制
 wx.showToast({
      title: '自定义图标弹窗',
      image: '../../static/image/icon.png',  //image的优先级会高于icon
      duration: 2000     
    })

5、加载中提示

代码语言:javascript
复制
wx.showLoading({
      title:'加载中...'
    });

6、带蒙层的弹窗

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

7、有列表弹窗

代码语言:javascript
复制
wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success: function (res) {
        console.log(res);
      }
    })

隐藏 wx.hideToast() wx.hideLoading()

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125413.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、纯文本提示
  • 2、取消确认提示
  • 3、成功提示
  • 4、自定义图标弹窗
  • 5、加载中提示
  • 6、带蒙层的弹窗
  • 7、有列表弹窗
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档