前言
小程序官方提供了 wx.showModal 方法涵叮，但樣式比較固定事哭，不能滿足多元化需求摆昧，自定義勢(shì)在必行~
老規(guī)矩先上圖
點(diǎn)擊某個(gè)按鈕界酒，彈出 modal框，里面的內(nèi)容可以自定義绘迁，可以是簡(jiǎn)單的文字提示合溺，也可以輸入框等復(fù)雜布局。操作完點(diǎn)擊取消或確定關(guān)閉 modal.
如何使用
將下面的 modal.wxml 缀台、modal.wxss 棠赛、modal.js 、modal.json 四個(gè)文件復(fù)制到對(duì)應(yīng)位置即可膛腐。
封裝完之后調(diào)用起來(lái)也很簡(jiǎn)單睛约，看看調(diào)用的代碼吧
<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view class='modal-content'>
<formrow wx:for='{{goodsList}}' wx:key='{{index}}' title="{{item.name}}" placeholder='庫(kù)存{{item.store}}' mode='input' rowpadding='10rpx' currentId="{{index}}" bindinput='goodsInput'></formrow>
</view>
</modal>
在modal中定義了 slot，所以可以將需要展示的任何布局包裹在 modal 中哲身。
上面的代碼簡(jiǎn)化一下就是
<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view class='modal-content'>你自己的布局</view>
</modal>
需要傳四個(gè)屬性
show ：用來(lái)控制 modal 的顯示隱藏辩涝。
height : 定義 modal 的高度，可以是百分比勘天，也可以是具體單位如 600rpx怔揩。
bindcancel ：點(diǎn)擊取消按鈕的回調(diào)捉邢。
bindconfirm ：點(diǎn)擊確定按鈕的回調(diào)。
自己的布局用一個(gè) view 包起來(lái)放到 modal 標(biāo)簽里即可沧踏。
開(kāi)始封裝
首先在你存放自定義組件的文件夾里新建個(gè) modal 文件夾歌逢，個(gè)人習(xí)慣將所有組件都放在 components 下面。
然后右鍵新建 component翘狱，注意是 component 不是 page 秘案，因?yàn)橐鳛榻M件引入到頁(yè)面中。
先看布局吧
modal.wxml
<view class='mask' wx:if='{{show}}' bindtap='clickMask'>
<view class='modal-content' style='height:{{height}}'>
<scroll-view scroll-y class='main-content'>
<slot></slot>
</scroll-view>
<view class='modal-btn-wrapper'>
<view class='cancel-btn' style='color:rgba(7,17,27,0.6)' bindtap='cancel'>取消</view>
<view class='confirm-btn' style='color:#13b5f5' bindtap='confirm'>確定</view>
</view>
</view>
</view>
布局講解
最外層是半透明的 mask 蒙版潦匈，覆蓋了整個(gè)頁(yè)面阱高。里面是包裹內(nèi)容的 view ，內(nèi)容區(qū)有兩層茬缩，上面是放置傳入布局的主內(nèi)容區(qū)赤惊，下面是取消和確定兩個(gè)按鈕。
這里把 slot 用 scroll-view 包裹了起來(lái)凰锡，處理了傳入的布局高度超出內(nèi)容區(qū)域的問(wèn)題未舟，如果超出將會(huì)滾動(dòng)。所以不必?fù)?dān)心傳入的布局高度掂为，大膽用就行裕膀。
內(nèi)容區(qū)的高度通過(guò)屬性傳入的 height 確定，默認(rèn)是 80%
modal.wxss
.mask{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.4);
z-index: 9999;
}
.modal-content{
display: flex;
flex-direction: column;
width: 90%;
/* height: 80%; */
background-color: #fff;
border-radius: 10rpx;
}
.modal-btn-wrapper{
display: flex;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
border-top: 2rpx solid rgba(7,17,27,0.1);
}
.cancel-btn, .confirm-btn{
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.cancel-btn{
border-right: 2rpx solid rgba(7,17,27,0.1);
}
.main-content{
flex: 1;
height: 100%;
overflow-y: hidden;
}
css講解
css沒(méi)啥講的勇哗，直接復(fù)制過(guò)去就行昼扛。
注意幾個(gè)點(diǎn)：
將 .mask 的 z-index 設(shè)置的高一些，確保能在所有布局的最上層欲诺。
modal.js
/**
* 自定義modal浮層
* 使用方法：
* <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view>你自己需要展示的內(nèi)容</view>
</modal>
屬性說(shuō)明：
show： 控制modal顯示與隱藏
height：modal的高度
bindcancel：點(diǎn)擊取消按鈕的回調(diào)函數(shù)
bindconfirm：點(diǎn)擊確定按鈕的回調(diào)函數(shù)
使用模塊：
場(chǎng)館 -> 發(fā)布 -> 選擇使用物品
*/
Component({
/**
* 組件的屬性列表
*/
properties: {
//是否顯示modal
show: {
type: Boolean,
value: false
},
//modal的高度
height: {
type: String,
value: '80%'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
clickMask() {
// this.setData({show: false})
},
cancel() {
this.setData({ show: false })
this.triggerEvent('cancel')
},
confirm() {
this.setData({ show: false })
this.triggerEvent('confirm')
}
}
})
Js 代碼也很簡(jiǎn)單抄谐，在 properties 中定義兩個(gè)需傳入的屬性 show 和 height ，并指定默認(rèn)值扰法。
在 methods 中寫(xiě)點(diǎn)擊取消和確定按鈕的回調(diào)蛹含，點(diǎn)擊按鈕后先通過(guò) this.setData({ show: false }) 將 modal 隱藏掉，再通過(guò) this.triggerEvent('confirm') 將點(diǎn)擊事件傳遞出去迹恐。
modal.json
{
"component": true,
"usingComponents": {}
}
json 主要是聲明 modal 為組件
結(jié)語(yǔ)
以上就是簡(jiǎn)單的 modal 彈窗封裝挣惰。如果不想要下面的確定取消兩個(gè)按鈕，內(nèi)容區(qū)的所有內(nèi)容都要外部傳入殴边，可以這樣寫(xiě)
<view class='mask' wx:if='{{show}}' bindtap='clickMask'>
<slot></slot>
</view>
如果需要多個(gè) slot 也可以憎茂，小程序都支持。
具體怎么實(shí)現(xiàn)看具體的業(yè)務(wù)需求吧锤岸，自定義的組件就是靈活性非常高竖幔，可以根據(jù)業(yè)務(wù)需求進(jìn)行調(diào)整。
作者正在寫(xiě)一個(gè)有趣的開(kāi)源項(xiàng)目 coderiver是偷，致力于打造全平臺(tái)型全棧精品開(kāi)源項(xiàng)目拳氢。
coderiver 中文名 河碼募逞，是一個(gè)為程序員和設(shè)計(jì)師提供項(xiàng)目協(xié)作的平臺(tái)。無(wú)論你是前端馋评、后端放接、移動(dòng)端開(kāi)發(fā)人員，或是設(shè)計(jì)師留特、產(chǎn)品經(jīng)理纠脾，都可以在平臺(tái)上發(fā)布項(xiàng)目，與志同道合的小伙伴一起協(xié)作完成項(xiàng)目蜕青。
coderiver 河碼 類(lèi)似程序員客棧苟蹈，但主要目的是方便各細(xì)分領(lǐng)域人才之間技術(shù)交流，共同成長(zhǎng)右核，多人協(xié)作完成項(xiàng)目慧脱。暫不涉及金錢(qián)交易。
計(jì)劃做成包含 pc端（Vue贺喝、React）菱鸥、移動(dòng)H5（Vue、React）躏鱼、ReactNative混合開(kāi)發(fā)采缚、Android原生、微信小程序挠他、java后端的全平臺(tái)型全棧項(xiàng)目，歡迎關(guān)注篡帕。
項(xiàng)目地址：https://github.com/cachecats/coderiver
您的鼓勵(lì)是我前行最大的動(dòng)力殖侵，歡迎點(diǎn)贊，歡迎送小星星? ~
