微信小程序自定义弹窗

首先wxml代码：

<view class="myToast" hidden="{{nullHouse}}"><text class="con">暂无有关信息</text></view>

<view bindtap="clickArea">点击此处</view>　　

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

wxss代码设置弹窗样式:

.myToast{
  line-height: 45rpx;
  border-radius:10rpx;
  color:rgb(255,255,255);
  font-size: 30rpx;
  z-index: 100;
  padding:5px 5px;
  position: absolute;
  width:100%;
  display: block;
  text-align:center;

}
.myToast .con{
  opacity: 0.85;
  background-color: rgb(114,113,113);
  color:rgb(255,255,255);
  text-align: center;
  margin: 0 auto;
  padding:8px;
  border-radius:5px;
  display:inline-block;
}

 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.setData({
        nullHouse: true //弹窗显示
      })
    }, 2000)

  },
})

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