微信小程序定时弹窗模板

最新推荐文章于 2025-02-14 22:07:11 发布

原创最新推荐文章于 2025-02-14 22:07:11 发布 · 642 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现定时弹窗的方法。通过使用wxss进行样式设计，wxml进行页面布局，以及js进行逻辑控制，可以创建一个在指定时间后自动显示的提醒窗口。此方法适用于需要定时通知用户的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序定时弹窗模板

wxml部分：

<view class="myToast" hidden="{{nullHouse}}">时间到啦!</view>

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

Page({
  data: {
nullHouse: false
},
onLoad: function (options) {
     var that = this;
     this.setData({
       nullHouse: false,
     })
     setTimeout(function () {
       that.setData({nullHouse:true})},3000)//3秒
       }
   })