微信小程序自定义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 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 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
德生PL550的电路分析
2021/03/02 无线电
PHP的变量总结 新手推荐
2011/04/18 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python动态监控日志内容的示例
2014/02/16 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python实现宿舍管理系统
2019/11/22 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python 对xml解析的示例
2021/02/27 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
医生实习工作总结的自我评价
2013/09/27 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
迎国庆演讲稿
2014/09/15 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python