小程序官方提供了 wx.showModal
方法,但樣式比較固定,不能知足多元化需求,自定義勢在必行~css
老規矩先上圖json
點擊某個按鈕,彈出 modal
框,裏面的內容能夠自定義,能夠是簡單的文字提示,也能夠輸入框等複雜佈局。操做完點擊取消或肯定關閉 modal
.小程序
將下面的 modal.wxml
、modal.wxss
、modal.js
、modal.json
四個文件複製到對應位置便可。bash
封裝完以後調用起來也很簡單,看看調用的代碼吧app
<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view class='modal-content'>
<formrow wx:for='{{goodsList}}' wx:key='{{index}}' title="{{item.name}}" placeholder='庫存{{item.store}}' mode='input' rowpadding='10rpx' currentId="{{index}}" bindinput='goodsInput'></formrow>
</view>
</modal>
複製代碼
在modal
中定義了 slot
,因此能夠將須要展現的任何佈局包裹在 modal
中。xss
上面的代碼簡化一下就是函數
<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view class='modal-content'>你本身的佈局</view>
</modal>
複製代碼
須要傳四個屬性佈局
show
:用來控制 modal
的顯示隱藏。flex
height
: 定義 modal
的高度,能夠是百分比,也能夠是具體單位如 600rpx
。ui
bindcancel
:點擊取消按鈕的回調。
bindconfirm
:點擊肯定按鈕的回調。
本身的佈局用一個 view
包起來放到 modal
標籤裏便可。
首先在你存放自定義組件的文件夾裏新建個 modal
文件夾,我的習慣將全部組件都放在 components
下面。
而後右鍵新建 component
,注意是 component
不是 page
,由於要做爲組件引入到頁面中。
先看佈局吧
<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
蒙版,覆蓋了整個頁面。裏面是包裹內容的 view
,內容區有兩層,上面是放置傳入佈局的主內容區,下面是取消和肯定兩個按鈕。
這裏把 slot
用 scroll-view
包裹了起來,處理了傳入的佈局高度超出內容區域的問題,若是超出將會滾動。因此沒必要擔憂傳入的佈局高度,大膽用就行。
內容區的高度經過屬性傳入的 height
肯定,默認是 80%
.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沒啥講的,直接複製過去就行。
注意幾個點:
將 .mask
的 z-index
設置的高一些,確保能在全部佈局的最上層。
/**
* 自定義modal浮層
* 使用方法:
* <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view>你本身須要展現的內容</view>
</modal>
屬性說明:
show: 控制modal顯示與隱藏
height:modal的高度
bindcancel:點擊取消按鈕的回調函數
bindconfirm:點擊肯定按鈕的回調函數
使用模塊:
場館 -> 發佈 -> 選擇使用物品
*/
Component({
/**
* 組件的屬性列表
*/
properties: {
//是否顯示modal
show: {
type: Boolean,
value: false
},
//modal的高度
height: {
type: String,
value: '80%'
}
},
/**
* 組件的初始數據
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
clickMask() {
// this.setData({show: false})
},
cancel() {
this.setData({ show: false })
this.triggerEvent('cancel')
},
confirm() {
this.setData({ show: false })
this.triggerEvent('confirm')
}
}
})
複製代碼
Js 代碼也很簡單,在 properties
中定義兩個需傳入的屬性 show
和 height
,並指定默認值。
在 methods
中寫點擊取消和肯定按鈕的回調,點擊按鈕後先經過 this.setData({ show: false })
將 modal
隱藏掉,再經過 this.triggerEvent('confirm')
將點擊事件傳遞出去。
{
"component": true,
"usingComponents": {}
}
複製代碼
json 主要是聲明 modal
爲組件
以上就是簡單的 modal
彈窗封裝。若是不想要下面的肯定取消兩個按鈕,內容區的全部內容都要外部傳入,能夠這樣寫
<view class='mask' wx:if='{{show}}' bindtap='clickMask'>
<slot></slot>
</view>
複製代碼
若是須要多個 slot
也能夠,小程序都支持。
具體怎麼實現看具體的業務需求吧,自定義的組件就是靈活性很是高,能夠根據業務需求進行調整。