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

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

微信小程序——toast提示、loading提示_第1张图片     

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

1、toast提示

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

title:提示的内容;

icon:图标;

duration:提示的延迟时间;

mask:是否显示透明蒙层,防止触摸穿透;

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

微信官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

另一种实现方式:

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

 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)

微信官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

你可能感兴趣的:(小程序)