微信小程序 彈窗

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

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！