微信小程序11 弹窗showToast，showLoading，showModal

弹窗是相当常用的功能，在微信里用弹窗还是挺方便的。

不同于我们写网页时，对于alert，confirm这些比较简陋的原生弹窗通常要引入第三方插件来美化，微信自带的弹窗效果还不错。

放一个按钮，绑定showToast方法。

<button bind:tap="showToast">点击弹窗1</button>

Js方法

通用showToast

使用微信提供的api，wx.showToast

  showToast() {

    wx.showToast({

      title: '弹窗1',

      icon:'success'

    })

  }

弹窗效果

 这个是我们最常见的效果了。

常用属性

 

title：就是文字内容；

icon：弹窗图案，不写的话默认是success,图案就是一个√

　　　还有error ：一个报错一样的感叹号；

　　　　

 　　　loading：转圈圈的效果

　　　　

 　　　　none：就是个透明的层，没有别的图案

　　　　

duration：弹窗存在时长，值是毫秒；

 

加载用 showLoading 

专门的loading效果

效果就是showToast的icon:loading的效果，属性也和showToast一样（除了icon不用设置）。

有区别的点在于，如果不指定弹窗时长，showLoading 会一直转圈圈不消失，我们可以通过指定duration来限制时长。

 

需要注意的点

如果一个方法里有多个弹窗api，那么只有最后一个生效

 

手动关闭弹窗

关闭对应的弹窗

    wx.hideToast()
    wx.hideLoading()

 

以上的showToast和showLoading，都是用来做一个提示功能的，没有互动。

showModal

开发工具默认就给了这几个结构

title标题，content提示文本内容，complete是选择的结果，取消或确定，可以在里面写相应的操作。

 showModal(){
    wx.showModal({
      title: '提示',
      content: '请选择',
      complete: (res) => {
        if (res.cancel) {
          
        }
    
        if (res.confirm) {
          
        }
      }
    })
  }

页面展示