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

最新推荐文章于 2024-09-16 00:00:00 发布

obon_dzc

最新推荐文章于 2024-09-16 00:00:00 发布

阅读量7.1k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixinmp2019/article/details/91052589

版权

本文介绍了如何在微信小程序中利用setTimeout实现弹窗功能。通过设置定时器，结合WXML、WXSS和JS文件，控制弹窗的显示与关闭。详细讲述了在js部分如何设置定时器，并解释了时间参数的意义。

摘要由CSDN通过智能技术生成

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部分：

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