微信小程序自定義純凈模態(tài)框（彈出框）的實例代碼
更新時間：2020年03月09日 11:55:22 作者：NAMECZ
這篇文章主要介紹了微信小程序自定義純凈模態(tài)框（彈出框）的實例代碼,代碼簡答易懂，非常不錯，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
由于官方API提供的模態(tài)框只能顯示簡單的文字，但是在實際應用場景中，我們需要模態(tài)框上能夠顯示各種各樣的組件和樣式，所以，以此為基礎(chǔ)模擬出一套可以供大家自定義的純凈版的模態(tài)框，滿足大家各式各樣的需求。
效果圖：
WXML:
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
這一塊區(qū)域為彈出框內(nèi)容區(qū)域，根據(jù)自己的業(yè)務進行自定義布局
</view>
WXSS:
/* 模態(tài)框 */
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
}
.modal-dialog {
box-sizing:border-box;
width: 85%;
padding:30rpx;
overflow: hidden;
position: fixed;
top: 20%;
left: 0;
right: 0;
margin: 0 auto;
z-index: 9999;
background: white;
border-radius: 5rpx;
}
JS:
data: {
showModal: false, //false關(guān)閉模態(tài)框 true開啟模態(tài)框
},
/**
* 彈出框蒙層截斷touchmove事件
*/
preventTouchMove: function () {
},
/**
* 隱藏模態(tài)對話框
*/
hideModal() {
var that = this;
that.setData({
showModal: false,
})
},
開啟模態(tài)框，只需要在標簽上綁定一個事件，將data里的showModal置為true即可。
此為最純凈的版本，個人經(jīng)常使用，遂發(fā)出來，希望能夠加快大家的開發(fā)效率。
到此這篇關(guān)于微信小程序自定義純凈模態(tài)框（彈出框）的實例代碼的文章就介紹到這了,更多相關(guān)微信小程序自定義 模態(tài)框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)可拖拽的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
微信小程序開發(fā)之tabbar圖標和顏色的實現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之tabbar圖標和顏色的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
JS實現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實例形式較為詳細的分析了JavaScript實現(xiàn)動態(tài)添加下拉菜單及響應鼠標事件生成菜單等實現(xiàn)技巧,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了Bootstrap導航條的使用方法第二篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript調(diào)用ajax獲取文本文件內(nèi)容實現(xiàn)代碼
這篇文章主要介紹了JavaScript調(diào)用ajax獲取文本文件內(nèi)容的方法,需要的朋友可以參考下2014-03-03
JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中，將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個常見的需求。本篇博客將介紹五種常用的方法來實現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu)，希望對大家有所幫助2023-03-03
詳解vue.js根據(jù)不同環(huán)境(正式、測試)打包到不同目錄
這篇文章主要介紹了詳解vue.js根據(jù)不同環(huán)境(正式、測試)打包到不同目錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動畫的代碼廢話少說，直接貼代碼！有注釋2012-10-10
這篇文章主要介紹了webpack之devtool詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02