微信小程序自定义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'
});

微信小程序自定义Modal弹框相关推荐

微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序之底部弹框预约插件
代码地址如下: http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq. ...
微信小程序——自定义下拉框
微信小程序本身并没有自带的下拉框组件,我们可以通过view标签自定义一个下拉框.(仅供参考) 目录文件目录实现效果实现逻辑设置数据设置默认选项实现弹出下拉框提供选项值设置所选值源码 ...
微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
微信小程序自定义showmodal 弹出框
最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧废话少说直接上代码 wxml部分 <view class="mask" ...
微信小程序之model弹框
小程序model表达形式一般有两种: 1. 第一种: wxml: <button type="primary" bindtap="click">按钮 ...
微信小程序自定义复选框
微信官方给的复选框太丑,想要样式多样需要我们自己定义先来张效果图 wxml循环生成选框,从js里取数据,根据checked的值,改变标签的样式类 <view class="two { ...

微信小程序自定义Modal弹框

微信小程序自定义Modal弹框相关推荐

最新文章

热门文章