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