微信小程序 彈窗自定義實(shí)例代碼
更新時間：2017年03月08日 15:42:40 作者：孤島里的貓大王
這篇文章主要介紹了微信小程序 彈窗自定義實(shí)例代碼的相關(guān)資料,有時候做開發(fā)項目的時候需要根據(jù)客戶需求更改原系統(tǒng)的組件，這里就對小程序中彈窗進(jìn)行更改，需要的朋友可以參考下
微信小程序 彈窗
首先wxml代碼：
<view class="myToast" hidden="{{nullHouse}}">暫無有關(guān)信息</view>
<view bindtap="clickArea">點(diǎn)擊此處</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+CSS實(shí)現(xiàn)仿雅虎另類滑動門切換效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿雅虎另類滑動門切換效果,涉及JavaScript響應(yīng)鼠標(biāo)事件及針對頁面元素的嵌套循環(huán)遍歷技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Cookie 經(jīng)常用，也就是把關(guān)鍵信息記錄進(jìn)去，確認(rèn)不在保留信息，則設(shè)置使之過期。2010-04-04
怎樣調(diào)用動態(tài)獲取的自定義對象的方法...2006-10-10
JavaScript事件類型中焦點(diǎn)、鼠標(biāo)和滾輪事件詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript事件類型中焦點(diǎn)、鼠標(biāo)和滾輪事件，以及注意事項，感興趣的小伙伴們可以參考一下2016-01-01
javascript實(shí)現(xiàn)tab切換的兩個實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)tab切換的兩個實(shí)例，是對之前方法原理的進(jìn)一步延伸，需要深入了解的同學(xué)可以參考一下2015-11-11
web開發(fā)中，經(jīng)常會使用驗證碼功能，例如登錄、注冊，或其他關(guān)鍵功能之前經(jīng)常會使用。下面通過實(shí)例代碼給大家介紹Web制作驗證碼功能實(shí)例代碼，感興趣的朋友一起看看吧2017-06-06
下面小編就為大家分享一篇移動前端圖片壓縮上傳的實(shí)例。具有很好的參考價值，希望對大家有所幫助。一起小編過來看看吧2017-12-12
JavaScript設(shè)計模式之責(zé)任鏈模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計模式之責(zé)任鏈模式,結(jié)合實(shí)例形式分析了責(zé)任鏈模式的概念、原理及具體定義與使用技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了js面向?qū)ο蠓绞綄?shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
前端JavaScript實(shí)現(xiàn)本地模糊搜索功能的方法實(shí)例
對于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來做。但是有時候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗,這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實(shí)現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下2021-07-07