這篇文章主要介紹了微信小程式彈窗自訂實例程式碼的相關資料,有時候做開發專案的時候需要根據客戶需求更改原始系統的組件,這裡就對小程式中彈窗進行更改,需要的朋友可以參考下
微信小程式彈窗
首先wxml程式碼:
<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view>
##
.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; }
註:
hidden屬性用來切換比較頻繁的地方。wxss程式碼設定彈窗樣式:
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的執行任務放回任務佇列的後面,等待執行。
###以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! ######相關推薦:#########微信小程式的訊息提示框的實作###############微信小程式實作動態設定placeholder提示文字及按鈕選取/取消狀態的方法###########################以上是微信小程式 彈跳窗自訂的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!