微信小程序自定義modal彈窗組件的方法詳解
微信小程序開發(fā)中官方自帶的wx.showModal，這個(gè)彈窗API有時(shí)候并不能滿足我們的彈窗效果，所以往往需要自定義modal組件。下面我們進(jìn)行一個(gè)自定義modal彈窗組件的開發(fā)，并進(jìn)行組件的引用，組件可自定義底部是一個(gè)還是兩個(gè)按鈕。效果如下。
首先我們可以在跟目錄下創(chuàng)建一個(gè)components文件夾存放所有的組件。新建一個(gè)modal文件夾，下面新建modal.js、modal.json、modal.wxml、modal.wxss四個(gè)文件。
modal.wxml布局文件：
<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'>
<view class='modal-content'>
<scroll-view scroll-y class='main-content'>
<slot></slot>
</scroll-view>
<view class='modal-footer'>
<view wx:if='{{!single}}' class='cancel-btn' bindtap='cancel'>取消</view>
<view class='confirm-btn' bindtap='confirm'>確定 </view>
</view>
</view>
</view>
modal.wxml文件中的一些說明：
show變量控制彈窗顯示或隱藏狀態(tài)，clickMask是點(diǎn)擊遮罩層的事件，可控制點(diǎn)擊遮罩是否隱藏modal彈窗，內(nèi)容中用scroll-view是為了滿足當(dāng)內(nèi)容過多時(shí)一頁顯示不全時(shí)可以上下滾動(dòng)瀏覽的效果（如果內(nèi)容很少直接用view標(biāo)簽也可以），scroll-y表示允許縱向滾動(dòng)（如果不需要可以刪掉）。****為組件引用時(shí)的自定義內(nèi)容替換掉就好了。single變量控制底部按鈕是一個(gè)還是兩個(gè)。cancel點(diǎn)擊取消綁定的事件，confirm點(diǎn)擊確定綁定的事件。
modal.json文件內(nèi)容：
{
"component": true,
"usingComponents": {}
}
modal.json文件內(nèi)容說明：
“component”: true, 表示這是一個(gè)組件文件，usingComponents用于引用別的組件，這里沒引用其他組件空{(diào)}就行。
modal.wxss 文件樣式
/* components/modal/modal.wxss */
/*遮罩層*/
.modal-mask{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
/*遮罩內(nèi)容*/
.modal-content{
display: flex;
flex-direction: column;
width: 80%;
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
text-align: center;
}
/*中間內(nèi)容*/
.main-content{
flex: 1;
height: 100%;
overflow-y: hidden;
max-height: 80vh; /* 內(nèi)容高度最高80vh 以免內(nèi)容太多溢出*/
}
/*底部按鈕*/
.modal-footer{
display: flex;
flex-direction: row;
height: 80rpx;
line-height: 80rpx;
border-top: 2rpx solid #D2D3D5;
margin-top: 30rpx;
}
.cancel-btn, .confirm-btn{
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.cancel-btn{
color: #000;
border-right: 2rpx solid #D2D3D5;
}
.confirm-btn {
color: #09BA07
}
以上樣式布局根據(jù)個(gè)人需求自行修改調(diào)整即可。
modal.js文件內(nèi)容
Component({
/**
* 組件的屬性列表
*/
properties: {
//是否顯示modal彈窗
show: {
type: Boolean,
value: false
},
//控制底部是一個(gè)按鈕還是兩個(gè)按鈕，默認(rèn)兩個(gè)
single: {
type: Boolean,
value: false
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
// 點(diǎn)擊modal的回調(diào)函數(shù)
clickMask() {
// 點(diǎn)擊modal背景關(guān)閉遮罩層，如果不需要注釋掉即可
this.setData({show: false})
},
// 點(diǎn)擊取消按鈕的回調(diào)函數(shù)
cancel() {
this.setData({ show: false })
this.triggerEvent('cancel') //triggerEvent觸發(fā)事件
},
// 點(diǎn)擊確定按鈕的回調(diào)函數(shù)
confirm() {
this.setData({ show: false })
this.triggerEvent('confirm')
}
}
})
到此為止，組件已經(jīng)定義好了。下面我們可以在其他頁面引用這個(gè)組件了。比如我在home這個(gè)頁面引用這個(gè)自定義modal彈窗。
首先在home.json文件中引用組件：
home.json文件內(nèi)容如下：
{
"usingComponents": {
"modalView": "../../components/modal/modal"
}
}
這里modalView為modal彈窗的自定義標(biāo)簽，可隨便定義。
接著，在home.wxml中將modalView標(biāo)簽添加到你想要顯示的位置。例如：
home.wxml文件內(nèi)容如下
<view>
<!-- modal彈窗-->
<modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'>
<view class='modal-content'>
<scroll-view scroll-y class='main-content'>
<view>這里面可替換成你想顯示的其他內(nèi)容</view>
<view>這里面可替換成你想顯示的其他內(nèi)容</view>
<text>這里面可替換成你想顯示的其他內(nèi)容</text>
</scroll-view>
</view>
</modalView>
</view>
home.js文件內(nèi)容如下
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
showModal: true, // 顯示modal彈窗
single: false // false 只顯示一個(gè)按鈕，如果想顯示兩個(gè)改為true即可
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
// 點(diǎn)擊取消按鈕的回調(diào)函數(shù)
modalCancel(e) {
// 這里面處理點(diǎn)擊取消按鈕業(yè)務(wù)邏輯
console.log('點(diǎn)擊了取消')
},
// 點(diǎn)擊確定按鈕的回調(diào)函數(shù)
modalConfirm(e) {
// 這里面處理點(diǎn)擊確定按鈕業(yè)務(wù)邏輯
console.log('點(diǎn)擊了確定')
}
})
在js文件中定義showModal控制modal彈窗的顯示狀態(tài)，single設(shè)置為false 表示只顯示一個(gè)按鈕
如果想顯示兩個(gè)按鈕將false改為true即可，如下效果：
兩個(gè)函數(shù)modalCancel和modalConfirm用于處理點(diǎn)擊取消按鈕業(yè)務(wù)邏輯
和處理點(diǎn)擊確定按鈕業(yè)務(wù)邏輯。比如我這里點(diǎn)擊了確認(rèn)按鈕可看到控制臺(tái)打印出了“點(diǎn)擊了確定”。
好了，微信小程序一個(gè)自定義modal彈窗的組件封裝和引用方法就這么搞定了O(∩_∩)O~
到此這篇關(guān)于微信小程序自定義modal彈窗組件的文章就介紹到這了,更多相關(guān)微信小程序自定義modal彈窗組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于JS實(shí)現(xiàn)簡單的隨機(jī)抽取幸運(yùn)員工系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于HTML+JavaScript實(shí)現(xiàn)簡單的隨機(jī)抽取幸運(yùn)員工系統(tǒng),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
這篇文章主要介紹了基于mpvue小程序使用echarts畫折線圖的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
可以自動(dòng)運(yùn)行exe文件，黑客程序，網(wǎng)頁木馬等2008-11-11
echarts學(xué)習(xí)筆記之箱線圖的分析與繪制詳解
最近在學(xué)習(xí)echarts，所以下面這篇文章主要給大家介紹了關(guān)于echarts學(xué)習(xí)筆記之箱線圖的分析與繪制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)評價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換
這篇文章主要為大家詳細(xì)介紹了swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)
這篇文章主要是對JavaScript動(dòng)態(tài)操作表格實(shí)例(添加,刪除行,列及單元格)進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)日歷左右滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要是對用鼠標(biāo)滾輪改變圖片大小的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11