微信小程序下使用定时器setTimeout实现弹窗功能

setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数，常用来做计时器/时钟。

 

其中的两个参数，一个参数是一个函数，用来定义你需要这个定时器执行的操作。

另一个参数是时间，用来定义循环的时间，单位是毫秒。

 

微信小程序的弹窗功能 

wxml部分：

  <view class="myToast" hidden="{{nullHouse}}">输入不可为空</view>

 这里说一下，弹窗归根结底是一个view，我们设置这个view（弹窗）是否显示取决于变量{{nullHouse}}，这样的话我可以在需要弹窗的函数中设置变量nullHouse的值，已达到显示弹窗的目的。

wxss部分:

/* 弹窗 */
.myToast{
 width:300rpx;
 height:130rpx;
 line-height: 130rpx;
 margin:80rpx 25%;
 border-radius:20rpx;
 background-color: rgb(114,113,113);
 color:rgb(255,255,255);
 font-size: 36rpx;
 text-align: center;
 position: absolute;
 z-index: 100;
 opacity: 0.85;
}

js部分：

在需要弹窗的函数内，写：

 var that = this;
     this.setData({
       nullHouse: false, //弹窗显示
     })
     setTimeout(function () {
       that.setData({nullHouse:true})},1500)

 噢，对了，记得吧 nullHouse变量加到data里面。  默认值为true表示不显示弹窗。

 

这里的意思就是显示弹窗，然后应用定时器，设置弹窗显示1500ms即1.5s，然后就关闭弹窗。

所以这里参数time：1500，有延迟时间的意思，延迟1500ms执行函数，即相当于让弹窗维持1500ms。