微信小程序自定義彈窗

首先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的執行任務放回任務隊列的后面，等待執行。