微信小程序自定义弹窗

Posted 2020-09-01 catXiao

首先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的执行任务放回任务队列的后面，等待执行。