微信小程序開發(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布局文件：
|
1
2
3
4
5
6
7
8
9
10
11
|
<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)容：
|
1
2
3
4
|
{ "component": true, "usingcomponents": {}} |
modal.json文件內(nèi)容說明：
“component”: true, 表示這是一個(gè)組件文件，usingcomponents用于引用別的組件，這里沒引用其他組件空{(diào)}就行。
modal.wxss 文件樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/* 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)容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
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)容如下：
|
1
2
3
4
5
|
{ "usingcomponents": { "modalview": "../../components/modal/modal" }} |
這里modalview為modal彈窗的自定義標(biāo)簽，可隨便定義。
接著，在home.wxml中將modalview標(biāo)簽添加到你想要顯示的位置。例如：
home.wxml文件內(nèi)容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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)容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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)按鈕可看到控制臺打印出了“點(diǎn)擊了確定”。
好了，微信小程序一個(gè)自定義modal彈窗的組件封裝和引用方法就這么搞定了o(∩_∩)o~
到此這篇關(guān)于微信小程序自定義modal彈窗組件的文章就介紹到這了,更多相關(guān)微信小程序自定義modal彈窗組件內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_37268201/article/details/85252318
