欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序 弹窗自定义实例代码

程序员文章站 2023-12-01 13:07:52
微信小程序 弹窗 首先wxml代码:

微信小程序 弹窗

首先wxml代码:

<view class="mytoast" hidden="{{nullhouse}}">暂无有关信息</view>
<view bindtap="clickarea">点击此处</view>  

注:hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

.mytoast{
 width:240rpx;
 height:130rpx;
 line-height: 130rpx;
 margin:80rpx 35%;
 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:true, //先设置隐藏
    },
 onload:function(options){
   // 页面初始化 options为页面跳转所带来的参数
 },
 onready:function(){
  // 页面渲染完成
 },
 onshow:function(){
  // 页面显示
 },
 onhide:function(){
  // 页面隐藏
 },
 onunload:function(){
  // 页面关闭
 },
 clickarea:function(){
  var that = this;
  this.setdata({
  nullhouse:false, //弹窗显示
  }) 
  settimeout(function(){
  that.data.nullhouse = true, //1秒之后弹窗隐藏
   },1000)
 },
})

 注:settimeout()函数是异步的,当计算机执行到settimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将settimeout的执行任务放回任务队列的后面,等待执行。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!