微信小程序自定義Modal彈框
更新時(shí)間：2022年07月08日 07:38:02 作者：lluohuih
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義Modal彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義Modal彈框的具體代碼，供大家參考，具體內(nèi)容如下
一、創(chuàng)建組件
1、在根目錄下自定義一個(gè)components文件夾，用來(lái)存放自定義的組件。
2、再針對(duì)每一個(gè)組件創(chuàng)建一個(gè)文件夾，用來(lái)存放這個(gè)組件相關(guān)的文件。
3、在指定組件的文件夾中右鍵->新建Component創(chuàng)建組件。這樣創(chuàng)建的目的是在json文件中添加"component": true，將其聲明為一個(gè)組件。
下面開(kāi)始例子：
1、組件頁(yè)面 index.wxml
<!-- 模態(tài)框 -->
<!-- 遮罩層 -->
<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>
? ? ? ? <!-- 關(guān)閉圖標(biāo) -->
? ? ? ? <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節(jié)點(diǎn) -->
? ? ? ? ? ? <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、組件頁(yè)面的js index.js
// components/modal/index.js
Component({
? ? options: {
? ? ? ? /**
? ? ? ? ? ? styleIsolation 選項(xiàng)從基礎(chǔ)庫(kù)版本 2.6.5 開(kāi)始支持。它支持以下取值：
? ? ? ? ? ? ? ? isolated 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會(huì)相互影響（一般情況下的默認(rèn)值）；
? ? ? ? ? ? ? ? apply-shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁(yè)面；
? ? ? ? ? ? ? ? shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁(yè)面和其他設(shè)置了 apply-shared 或 shared 的自定義組件。（這個(gè)選項(xiàng)在插件中不可用。）
? ? ? ? ?*/
? ? ? ? styleIsolation: 'isolated'
? ? },
? ? /**
? ? ?* 組件的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? windowWidth: 0,
? ? ? ? windowHeight: 0,
? ? },
? ? /**
? ? ?* 生命周期函數(shù)
? ? ?*/
? ? ready: function() {
? ? ? ? var _this = this;
? ? ? ? wx.getSystemInfo({
? ? ? ? ? ? success: function(res) {
? ? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? ? ? windowWidth: res.windowWidth,
? ? ? ? ? ? ? ? ? ? windowHeight: res.windowHeight,
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? });
? ? },
? ? /**
? ? ?* 組件的屬性列表
? ? ?*/
? ? properties: {
? ? ? ? //是否顯示關(guān)閉圖標(biāo)
? ? ? ? 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 節(jié)點(diǎn)，請(qǐng)確認(rèn) selector 及 context 是否正確');
? ? }
};
Modal.show = (options) => Modal(options);
export default Modal;6、使用方法
需要用到modal的頁(yè)面引入modal組件：
{
? ? "usingComponents": {
? ? ? ? "cus-modal": "../../components/modal/index"
? ? }
}頁(yè)面加入modal節(jié)點(diǎn)：
<cus-modal id="testModal"> ? ? <!-- 內(nèi)容 --> ? ? <view style="text-align: center;"> ? ? ? ? <!-- ...... --> ? ? </view> </cus-modal>
在頁(yè)面的js中彈出modal窗口：
//引入modal組件
import Modal from '../../components/modal/modal';
//在代碼中調(diào)用
Modal.show({
? ? selector: '#testModal'
});以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序自定義Dialog彈框
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單彈框效果
- 微信小程序自定義彈框效果
- 微信小程序開(kāi)發(fā)實(shí)現(xiàn)首頁(yè)彈框活動(dòng)引導(dǎo)功能
- 微信小程序?qū)崿F(xiàn)自定義動(dòng)畫(huà)彈框/提示框的方法實(shí)例
- 微信小程序?qū)崿F(xiàn)彈框效果
- 微信小程序之幾種常見(jiàn)的彈框提示信息實(shí)現(xiàn)詳解
- 微信小程序開(kāi)發(fā)之實(shí)現(xiàn)自定義Toast彈框
- 微信小程序開(kāi)發(fā)之toast等彈框提示使用教程
- 微信小程序 modal彈框組件詳解
相關(guān)文章
jquery實(shí)現(xiàn)簡(jiǎn)單的遮罩層
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的遮罩層相關(guān)代碼，內(nèi)容很豐富，教大家實(shí)現(xiàn)遮罩層效果，感興趣的小伙伴們可以參考一下2016-01-01
javascript實(shí)現(xiàn)checkBox的全選，反選與賦值
這篇文章主要介紹了javascript實(shí)現(xiàn)checkBox的全選，反選與賦值的方法，以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過(guò)程2015-03-03
詳解使用grunt完成requirejs的合并壓縮和js文件的版本控制
這篇文章主要介紹了詳解使用grunt完成requirejs的合并壓縮和js文件的版本控制 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
js貪心算法 錢(qián)幣找零問(wèn)題代碼實(shí)例
這篇文章主要介紹了js貪心算法 錢(qián)幣找零問(wèn)題代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法
這篇文章主要介紹了利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
基于Node.js的JavaScript項(xiàng)目構(gòu)建工具gulp的使用教程
也許你使用過(guò)grunt,那么這里來(lái)安利gulp的話就更加不會(huì)陌生了,下面我們就來(lái)看一下基于Node.js的JavaScript項(xiàng)目構(gòu)建工具gulp的使用教程2016-05-05
用javascript代替marquee的滾動(dòng)字幕效果代碼
用javascript代替marquee的滾動(dòng)字幕效果代碼...2007-04-04
TypeScript中的接口Interface詳解(對(duì)象類(lèi)型的強(qiáng)大工具)
TypeScript中的接口是一個(gè)強(qiáng)大而靈活的特性,它為我們提供了一種清晰、簡(jiǎn)潔的方式來(lái)定義對(duì)象的結(jié)構(gòu)和類(lèi)型,通過(guò)使用接口,我們可以編寫(xiě)更加健壯、可維護(hù)的代碼,這篇文章主要介紹了TypeScript中的接口(Interface):對(duì)象類(lèi)型的強(qiáng)大工具,需要的朋友可以參考下2024-08-08
正則表達(dá)式是匹配模式，要么匹配字符，要么匹配位置。在JavaScript中正則表達(dá)式常常用來(lái)驗(yàn)證表單等。本文將帶大家深入了解一下JavaScript中的正則表達(dá)式應(yīng)該如何使用，需要的朋友可以參考一下2021-12-12
JavaScript原型繼承之基礎(chǔ)機(jī)制分析
由于語(yǔ)言設(shè)計(jì)上的原因，JavaScript 沒(méi)有真正意義上“類(lèi)”的概念。而通常使用的 new 命令實(shí)例化對(duì)象的方法，其實(shí)是對(duì)原型對(duì)象的實(shí)例化。2011-08-08