微信小程序自定义modal弹窗组件的方法详解


Posted in Javascript onDecember 20, 2020

微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件。下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用,组件可自定义底部是一个还是两个按钮。效果如下。

微信小程序自定义modal弹窗组件的方法详解
微信小程序自定义modal弹窗组件的方法详解

首先我们可以在跟目录下创建一个components文件夹存放所有的组件。新建一个modal文件夹,下面新建modal.js、modal.json、modal.wxml、modal.wxss四个文件。

微信小程序自定义modal弹窗组件的方法详解

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变量控制弹窗显示或隐藏状态,clickMask是点击遮罩层的事件,可控制点击遮罩是否隐藏modal弹窗,内容中用scroll-view是为了满足当内容过多时一页显示不全时可以上下滚动浏览的效果(如果内容很少直接用view标签也可以),scroll-y表示允许纵向滚动(如果不需要可以删掉)。****为组件引用时的自定义内容替换掉就好了。single变量控制底部按钮是一个还是两个。cancel点击取消绑定的事件,confirm点击确定绑定的事件。

modal.json文件内容:

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

modal.json文件内容说明:

“component”: true, 表示这是一个组件文件,usingComponents用于引用别的组件,这里没引用其他组件空{}就行。

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;
}
/*遮罩内容*/
.modal-content{
 display: flex;
 flex-direction: column;
 width: 80%;
 background-color: #fff;
 border-radius: 10rpx;
 padding: 20rpx;
 text-align: center;
}
/*中间内容*/
.main-content{
 flex: 1;
 height: 100%;
 overflow-y: hidden; 
 max-height: 80vh; /* 内容高度最高80vh 以免内容太多溢出*/
}
/*底部按钮*/
.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
}

以上样式布局根据个人需求自行修改调整即可。

modal.js文件内容

Component({
 /**
 * 组件的属性列表
 */
 properties: {
 //是否显示modal弹窗
 show: {
  type: Boolean,
  value: false
 },
 //控制底部是一个按钮还是两个按钮,默认两个
 single: {
  type: Boolean,
  value: false 
 }
 },

 /**
 * 组件的初始数据
 */
 data: {

 },

 /**
 * 组件的方法列表
 */
 methods: {
 // 点击modal的回调函数
 clickMask() {
  // 点击modal背景关闭遮罩层,如果不需要注释掉即可
  this.setData({show: false})
 },
 // 点击取消按钮的回调函数
 cancel() {
  this.setData({ show: false })
  this.triggerEvent('cancel') //triggerEvent触发事件
 },
 // 点击确定按钮的回调函数
 confirm() {
  this.setData({ show: false })
  this.triggerEvent('confirm')
 }
 }
})

到此为止,组件已经定义好了。下面我们可以在其他页面引用这个组件了。比如我在home这个页面引用这个自定义modal弹窗。

微信小程序自定义modal弹窗组件的方法详解

首先在home.json文件中引用组件:

home.json文件内容如下:

{
	"usingComponents": {
 		"modalView": "../../components/modal/modal"
	}
}

这里modalView为modal弹窗的自定义标签,可随便定义。

接着,在home.wxml中将modalView标签添加到你想要显示的位置。例如:

home.wxml文件内容如下

<view>
 <!-- modal弹窗-->
 <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'>
 <view class='modal-content'>
  <scroll-view scroll-y class='main-content'>
  <view>这里面可替换成你想显示的其他内容</view>
  <view>这里面可替换成你想显示的其他内容</view>
  <text>这里面可替换成你想显示的其他内容</text>
  </scroll-view>
 </view>
 </modalView>
</view>

home.js文件内容如下

Page({

 /**
 * 页面的初始数据
 */
 data: {
 showModal: true, // 显示modal弹窗
 single: false // false 只显示一个按钮,如果想显示两个改为true即可
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },
 // 点击取消按钮的回调函数
 modalCancel(e) {
 // 这里面处理点击取消按钮业务逻辑
 console.log('点击了取消')
 },
 // 点击确定按钮的回调函数
 modalConfirm(e) {
 // 这里面处理点击确定按钮业务逻辑
 console.log('点击了确定')
 }
})

在js文件中定义showModal控制modal弹窗的显示状态,single设置为false 表示只显示一个按钮

微信小程序自定义modal弹窗组件的方法详解

如果想显示两个按钮将false改为true即可,如下效果:

微信小程序自定义modal弹窗组件的方法详解

两个函数modalCancel和modalConfirm用于处理点击取消按钮业务逻辑

和处理点击确定按钮业务逻辑。比如我这里点击了确认按钮可看到控制台打印出了“点击了确定”。

微信小程序自定义modal弹窗组件的方法详解

好了,微信小程序一个自定义modal弹窗的组件封装和引用方法就这么搞定了O(∩_∩)O~

到此这篇关于微信小程序自定义modal弹窗组件的文章就介绍到这了,更多相关微信小程序自定义modal弹窗组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 #Javascript
JavaScript中arguments的使用方法详解
Dec 20 #Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
You might like
用libTemplate实现静态网页的生成
2006/10/09 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jquery操作select大全
2014/04/25 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
详解VUE 数组更新
2017/12/16 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Numpy数组的广播机制的实现
2020/11/03 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
SQL语言面试题
2013/08/27 面试题
一道SQL存储过程面试题
2016/10/07 面试题
P/Invoke是什么
2015/07/31 面试题
外贸业务员工作职责
2014/01/06 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
python如何在word中存储本地图片
2021/04/07 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js