156-0102-3311
联系QQ 284710375
首页 > 技术分享 > 微信小程序
分享到:收藏

微信小程序弹框wx.showToast()和wx.showLoading()详解2021-09-08 16:35:04

大潇博客 原创文章,转载请标明出处

wx.showToast() 和wx.showLoading() 均为小程序弹框函数


wx.showToast() 图标为“success”

image.png


wx.showLoading() 图标为“loading”

image.png



onLoad: function (options) {

    //成功图标

    wx.showToast({

      title:"成功",

      icon: 'loading...', //图标,支持"success"、"loading"

      image: '/images/tan.png', //自定义图标的本地路径,image的优先级高于 icon

      duration: 2000, //提示的延迟时间,单位毫秒,默认:1500

      mask: false, //是否显示透明蒙层,防止触摸穿透,默认:false

      success:function(){},

      fail:function(){},

      complete:function(){}

    });

    //等待图标

    wx.showLoading({

      title: '玩命加载中',

      duration: 2000,

    });

  },


遇到的问题:

1、mask:

经反复测试,查询相关论坛,“mask”基本等于失效状态,可能要根据当前微信的基础库决定是否有效,实际开发中,建议忽略此配置


2、icon: 'loading...':

在wx.showToast实际应用中:icon: 'loading...' 已经无效,icon配置项可以略去不写,不管填什么,测试结果有且只有一种“succss”,需要使用loading时建议直接使用wx.showLoading


3、image:

在实际开发中success和loading图标不满足时,可以通过加image:'图片路径',路径可以存储到本地,随小程序打包一起上传,比如在根目录创建images文件夹,里面有图片error.png,此处填写:

image: '/images/error.png'

image优先级是最高的,设置了image就会优先显示,icon则无效


4、默认显示时长与duration:

在wx.showToast中,duration默认为2000,两秒后弹框自动关闭

在wx.showLoading,没有默认时长,不设置duration则弹框一直显示,不会自动关闭


5、wx.showLoading 和 wx.showToast 同时只能显示一个,若同时触发,则代码靠后的显示


打赏

阅读排行

    大家都在搜

    博客维护不易,感谢你的肯定
    扫码打赏,建议金额1-10元
  • 15601023311