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

发布时间 2023-08-07 17:32:17作者: luytest

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

不同于我们写网页时,对于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) {
          
        }
      }
    })
  }

页面展示