快捷導(dǎo)航

微信小程序自定義modal彈窗組件的方法詳解

更新時間：2020年12月20日 14:46:52 作者：遇見小美好

這篇文章主要給大家介紹了關(guān)于微信小程序自定義modal彈窗組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

微信小程序開發(fā)中官方自帶的wx.showModal，這個彈窗API有時候并不能滿足我們的彈窗效果，所以往往需要自定義modal組件。下面我們進(jìn)行一個自定義modal彈窗組件的開發(fā)，并進(jìn)行組件的引用，組件可自定義底部是一個還是兩個按鈕。效果如下。

在這里插入圖片描述

首先我們可以在跟目錄下創(chuàng)建一個components文件夾存放所有的組件。新建一個modal文件夾，下面新建modal.js、modal.json、modal.wxml、modal.wxss四個文件。

奮斗奮斗

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)容過多時一頁顯示不全時可以上下滾動瀏覽的效果（如果內(nèi)容很少直接用view標(biāo)簽也可以），scroll-y表示允許縱向滾動（如果不需要可以刪掉）。****為組件引用時的自定義內(nèi)容替換掉就好了。single變量控制底部按鈕是一個還是兩個。cancel點(diǎn)擊取消綁定的事件，confirm點(diǎn)擊確定綁定的事件。

modal.json文件內(nèi)容：

{
 "component": true, 
 "usingComponents": {}
}

modal.json文件內(nèi)容說明：

“component”: true, 表示這是一個組件文件，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ù)個人需求自行修改調(diào)整即可。

modal.js文件內(nèi)容

Component({
 /**
 * 組件的屬性列表
 */
 properties: {
 //是否顯示modal彈窗
 show: {
  type: Boolean,
  value: false
 },
 //控制底部是一個按鈕還是兩個按鈕，默認(rèn)兩個
 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)定義好了。下面我們可以在其他頁面引用這個組件了。比如我在home這個頁面引用這個自定義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 只顯示一個按鈕，如果想顯示兩個改為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 表示只顯示一個按鈕

在這里插入圖片描述