微信小程序 彈窗自定義實例代碼
更新時間：2017年03月08日 15:42:40 作者：孤島里的貓大王
這篇文章主要介紹了微信小程序 彈窗自定義實例代碼的相關(guān)資料,有時候做開發(fā)項目的時候需要根據(jù)客戶需求更改原系統(tǒng)的組件，這里就對小程序中彈窗進(jìn)行更改，需要的朋友可以參考下
微信小程序 彈窗
首先wxml代碼：
<view class="myToast" hidden="{{nullHouse}}">暫無有關(guān)信息</view>
<view bindtap="clickArea">點擊此處</view>
注：hidden屬性用于切換比較頻繁的地方。
wxss代碼設(shè)置彈窗樣式:
.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, //先設(shè)置隱藏
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
},
clickArea:function(){
var that = this;
this.setData({
nullHouse:false, //彈窗顯示
})
setTimeout(function(){
that.data.nullHouse = true, //1秒之后彈窗隱藏
},1000)
},
})
注：setTimeout()函數(shù)是異步的，當(dāng)計算機(jī)執(zhí)行到setTimeout時，此任務(wù)先暫停并保存，繼續(xù)執(zhí)行后續(xù)未完成的任務(wù)，當(dāng)條件滿足時，再將setTimeout的執(zhí)行任務(wù)放回任務(wù)隊列的后面，等待執(zhí)行。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
js鍵盤上下左右鍵怎么觸發(fā)function(實例講解)
這篇文章主要是對js鍵盤上下左右鍵怎么觸發(fā)function 進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了微信開發(fā) 消息推送實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
ES6學(xué)習(xí)教程之Map的常用方法總結(jié)
Map 是 ES6 中新增的一種數(shù)據(jù)結(jié)構(gòu)，與 Set 一起添加，其實功能都差不多。下面這篇文章主要給大家總結(jié)介紹了關(guān)于ES6學(xué)習(xí)教程之Map的常用方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
詳解html-webpack-plugin插件(用法總結(jié))
這篇文章主要介紹了詳解html-webpack-plugin插件(用法總結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
不用一行代碼和一句提示語就搞定整個表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要給大家介紹了關(guān)于JS保留小數(shù)幾種簡單方法,在JS中保留小數(shù)的方法有很多,可以Math函數(shù)或者以字符串形式來進(jìn)行處理,但在有的時候需要四舍五入,有時候不需要,需要的朋友可以參考下2023-10-10
JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法
這篇文章主要介紹了JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了js實現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼,通過JavaScript定時函數(shù)遞歸調(diào)用實現(xiàn)折疊菜單的緩沖效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
使用forEach和ES6實現(xiàn)tab切換的示例代碼
tab切換在很多菜單欄中都可以用到，本文主要介紹了使用forEach和ES6實現(xiàn)tab切換的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
學(xué)習(xí)JavaScript設(shè)計模式之責(zé)任鏈模式
這篇文章主要為大家介紹了JavaScript設(shè)計模式中的責(zé)任鏈模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下2016-01-01