微信小程式自定義Modal彈框

2022-07-08 10:00:52

本文範例為大家分享了微信小程式自定義Modal彈框的具體程式碼，供大家參考，具體內容如下

一、建立元件

1、在根目錄下自定義一個components資料夾，用來存放自定義的元件。
2、再針對每一個元件建立一個資料夾，用來存放這個元件相關的檔案。

3、在指定元件的資料夾中右鍵->新建Component建立元件。這樣建立的目的是在json檔案中新增"component": true，將其宣告為一個元件。

下面開始例子：

1、元件頁面 index.wxml

<!-- 模態框 -->
<!-- 遮罩層 -->
<view class="components-modal-overlay-view" style="width: {{ windowWidth }}px; height: {{ windowHeight }}px; display: {{ show ? 'block' : 'none' }};"></view>

<view class="col-center" style="width: {{ windowWidth }}px; height: {{ windowHeight }}px; display: {{ show ? 'flex' : 'none' }};">
    <view>
        <!-- 關閉圖示 -->
        <view class="components-modal-close-view" style="display: {{ showCloseIcon ? 'block' : 'none' }};">
            <image bindtouchend="hideCusModal" src="./images/close-white2x.png" style="width: 24px; height: 24px;"></image>
        </view>
        <view class="{{ showContentStyle ? 'components-modal-content-view' : '' }}">
            <!-- slot表示可以插入wxml節點 -->
            <slot></slot>
        </view>
    </view>
</view>

2、元件樣式 index.wxss

/* components/modal/index.wxss */
.components-modal-overlay-view {
    background-color: #000000;
    opacity: 0.5;
    position: fixed;
    z-index: 10;
}
.components-modal-close-view  {
    text-align: right;
    margin-bottom: 5px;
}
.col-center {
    position: fixed;
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.components-modal-content-view {
    background: #FFFFFF;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

3、元件json設定 index.json

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

4、元件頁面的js index.js

// components/modal/index.js
Component({
    options: {
        /**
            styleIsolation 選項從基礎庫版本 2.6.5 開始支援。它支援以下取值：
                isolated 表示啟用樣式隔離，在自定義元件內外，使用 class 指定的樣式將不會相互影響（一般情況下的預設值）；
                apply-shared 表示頁面 wxss 樣式將影響到自定義元件，但自定義元件 wxss 中指定的樣式不會影響頁面；
                shared 表示頁面 wxss 樣式將影響到自定義元件，自定義元件 wxss 中指定的樣式也會影響頁面和其他設定了 apply-shared 或 shared 的自定義元件。（這個選項在外掛中不可用。）
         */
        styleIsolation: 'isolated'
    },
    /**
     * 元件的初始資料
     */
    data: {
        windowWidth: 0,
        windowHeight: 0,
    },
    /**
     * 生命週期函數
     */
    ready: function() {
        var _this = this;
        wx.getSystemInfo({
            success: function(res) {
                _this.setData({
                    windowWidth: res.windowWidth,
                    windowHeight: res.windowHeight,
                });
            }
        });
    },
    /**
     * 元件的屬性列表
     */
    properties: {
        //是否顯示關閉圖示
        showCloseIcon: {
            type: Boolean,
            value: true
        },
        //是否顯示Content樣式（白色底色，圓角等）
        showContentStyle: {
            type: Boolean,
            value: true
        },
        show: {
            type: Boolean,
            value: false
        },
    },
    /**
     * 元件的方法列表
     */
    methods: {
        /**
         * 隱藏Modal
         */
        hideCusModal: function(){
            this.setData({
                show: false,
            });
        }
    }
})

5、元件js modal.js

const defaultOptions = {
    show: false,
    selector: '#cus-modal',
    showCloseIcon: true,
    showContentStyle: true,
};
let currentOptions = Object.assign({}, defaultOptions);
function getContext() {
    const pages = getCurrentPages();
    return pages[pages.length - 1];
}
const Modal = (options) => {
    options = Object.assign(Object.assign({}, currentOptions), options);
    const context = options.context || getContext();
    const modal = context.selectComponent(options.selector);
    delete options.context;
    delete options.selector;
    if (modal) {
        modal.setData(options);
        wx.nextTick(() => {
            modal.setData({ show: true });
        });
    }
    else {
        console.warn('未找到 cus-modal 節點，請確認 selector 及 context 是否正確');
    }
};
Modal.show = (options) => Modal(options);
export default Modal;

6、使用方法

需要用到modal的頁面引入modal元件：

{
    "usingComponents": {
        "cus-modal": "../../components/modal/index"
    }
}

頁面加入modal節點：

<cus-modal id="testModal">
    <!-- 內容 -->
    <view style="text-align: center;">
        <!-- ...... -->
    </view>
</cus-modal>

在頁面的js中彈出modal視窗：

//引入modal元件
import Modal from '../../components/modal/modal';

//在程式碼中呼叫
Modal.show({
    selector: '#testModal'
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

微信小程式自定義Modal彈框

一、建立元件

熱門文章