微信小程序toast提示loading提示

2025-01-05 约 753 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=104821318

微信小程序——toast提示、loading提示

微信小程序开发常常会用到的toast提示、loading加载提示，如下图样式：

下面就说下这两种提示在小程序里面的实现方式：

1、toast提示

    wx.showToast({
      title: '这是toast',
      icon: 'succes',
      duration: 2000,
      mask: true
    })

title：提示的内容；

icon：图标；

duration：提示的延迟时间；

mask：是否显示透明蒙层，防止触摸穿透；

image：自定义图标的本地路径，image 的优先级高于 icon。

微信官方文档地址：

另一种实现方式：

先在布局文件.wxml文件里声明：

 <text class="toast_button" bindtap="toastClick">toast提示</text>  
 <toast hidden="{{status}}" duration="2000" bindchange="toastHide">
    这是toast
  </toast>

注释：点击了button后，触发bindtap的绑定事件toastShow：将status设置为false，也就是显示toast。随后过了2秒钟，触发了toast标签中bindchange的绑定事件toastHide，将status设置为true，也就是隐藏toast 。

之后在.js里面写方法来实现：

  // toast提示按钮点击事件
  toastClick:function(e){
    this.toastShow();//Toast弹窗
  },

  // 显示toast
  toastShow: function (event) {
    console.log("触发了点击事件，弹出toast")
    status = false
    this.setData({ status: status })//setData方法可以建立新的data属性，从而起到跟视图实时同步的效果
  },

  // 隐藏toast
  toastHide: function (event) {
    console.log("触发bindchange，隐藏toast")
    status = true
    this.setData({ status: status })
  },
  data: {
    status: status//data里面的属性可以传递到视图
  }

2、loading提示

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

    setTimeout(function () {
      wx.hideLoading()
    }, 2000)

微信官方文档地址：

目录

微信小程序toast提示loading提示

微信小程序——toast提示、loading提示