點擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:12:45

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法:前言小程序官方提供了 wx.showModal 方法，但樣式比較固定，不能滿足多元化需求，自定義勢在必行~ 老規(guī)矩先上圖點擊某個按鈕，彈出 modal框，里面的內(nèi)容可以自定義，可以是簡單的文字提示，也可以輸入框等復(fù)雜布局。操作完點擊取消或確定關(guān)閉 moda

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法:前言小程序官方提供了 wx.showModal 方法，但樣式比較固定，不能滿足多元化需求，自定義勢在必行~ 老規(guī)矩先上圖點擊某個按鈕，彈出 modal框，里面的內(nèi)容可以自定義，可以是簡單的文字提示，也可以輸入框等復(fù)雜布局。操作完點擊取消或確定關(guān)閉 moda

前言

小程序官方提供了 wx.showModal 方法，但樣式比較固定，不能滿足多元化需求，自定義勢在必行~

老規(guī)矩先上圖

點擊某個按鈕，彈出 modal框，里面的內(nèi)容可以自定義，可以是簡單的文字提示，也可以輸入框等復(fù)雜布局。操作完點擊取消或確定關(guān)閉 modal.

如何使用

將下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四個文件復(fù)制到對應(yīng)位置即可。

封裝完之后調(diào)用起來也很簡單，看看調(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='庫存{{item.store}}' mode='input' rowpadding='10rpx' currentId="{{index}}" bindinput='goodsInput'></formrow>
 </view>
</modal>

在modal中定義了 slot，所以可以將需要展示的任何布局包裹在 modal 中。

上面的代碼簡化一下就是

<modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
 <view class='modal-content'>你自己的布局</view>
</modal>

需要傳四個屬性

show ：用來控制 modal 的顯示隱藏。

height : 定義 modal 的高度，可以是百分比，也可以是具體單位如 600rpx。

bindcancel ：點擊取消按鈕的回調(diào)。

bindconfirm ：點擊確定按鈕的回調(diào)。

自己的布局用一個 view 包起來放到 modal 標簽里即可。

開始封裝

首先在你存放自定義組件的文件夾里新建個 modal 文件夾，個人習(xí)慣將所有組件都放在 components 下面。

然后右鍵新建 component，注意是 component 不是 page ，因為要作為組件引入到頁面中。

先看布局吧

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 蒙版，覆蓋了整個頁面。里面是包裹內(nèi)容的 view ，內(nèi)容區(qū)有兩層，上面是放置傳入布局的主內(nèi)容區(qū)，下面是取消和確定兩個按鈕。

這里把 slot 用 scroll-view 包裹了起來，處理了傳入的布局高度超出內(nèi)容區(qū)域的問題，如果超出將會滾動。所以不必擔(dān)心傳入的布局高度，大膽用就行。

內(nèi)容區(qū)的高度通過屬性傳入的 height 確定，默認是 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沒啥講的，直接復(fù)制過去就行。

注意幾個點：

將 .mask 的 z-index 設(shè)置的高一些，確保能在所有布局的最上層。

modal.js

/**
 * 自定義modal浮層
 * 使用方法：
 * <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
 <view>你自己需要展示的內(nèi)容</view>
 </modal>

 屬性說明：
 show： 控制modal顯示與隱藏
 height：modal的高度
 bindcancel：點擊取消按鈕的回調(diào)函數(shù)
 bindconfirm：點擊確定按鈕的回調(diào)函數(shù)

 使用模塊：
 場館 -> 發(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 代碼也很簡單，在 properties 中定義兩個需傳入的屬性 show 和 height ，并指定默認值。

在 methods 中寫點擊取消和確定按鈕的回調(diào)，點擊按鈕后先通過 this.setData({ show: false }) 將 modal 隱藏掉，再通過 this.triggerEvent('confirm') 將點擊事件傳遞出去。

modal.json
{
 "component": true,
 "usingComponents": {}
}

json 主要是聲明 modal 為組件

結(jié)語

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：小程序微信小程序實現(xiàn)

熱門焦點

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法

微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法

最新推薦

猜你喜歡

熱門推薦