微信小程序自定义模态对话框实例详解


Posted in Javascript onAugust 16, 2017

由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。

wx.showModal(OBJECT)
自定义
模态对话框

涉及文件

界面 wxml
样式 wxcss
事件及方法 js

效果图

微信小程序自定义模态对话框实例详解

微信小程序自定义模态对话框实例详解

界面代码 .wxml

<button class="show-btn" bindtap="showDialogBtn">弹窗</button>

<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
 <view class="modal-title">添加数量</view>
 <view class="modal-content">
 <view class="modal-input">
  <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input>
 </view>
 </view>
 <view class="modal-footer">
 <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
 <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
 </view>
</view>

样式 .wxss

.show-btn {
 margin-top: 100rpx;
 color: #22cc22;
}

.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
 color: #fff;
}

.modal-dialog {
 width: 540rpx;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 9999;
 background: #f9f9f9;
 margin: -180rpx 105rpx;
 border-radius: 36rpx;
}

.modal-title {
 padding-top: 50rpx;
 font-size: 36rpx;
 color: #030303;
 text-align: center;
}

.modal-content {
 padding: 50rpx 32rpx;
}

.modal-input {
 display: flex;
 background: #fff;
 border: 2rpx solid #ddd;
 border-radius: 4rpx;
 font-size: 28rpx;
}


.input {
 width: 100%;
 height: 82rpx;
 font-size: 28rpx;
 line-height: 28rpx;
 padding: 0 20rpx;
 box-sizing: border-box;
 color: #333;
}

input-holder {
 color: #666;
 font-size: 28rpx;
}

.modal-footer {
 display: flex;
 flex-direction: row;
 height: 86rpx;
 border-top: 1px solid #dedede;
 font-size: 34rpx;
 line-height: 86rpx;
}

.btn-cancel {
 width: 50%;
 color: #666;
 text-align: center;
 border-right: 1px solid #dedede;
}

.btn-confirm {
 width: 50%;
 color: #ec5300;
 text-align: center;
}

事件及方法 .js

Page({
 data: {
  showModal: false,
 },
 onLoad: function () {
 },
 /**
  * 弹窗
  */
 showDialogBtn: function() {
  this.setData({
  showModal: true
  })
 },
 /**
  * 弹出框蒙层截断touchmove事件
  */
 preventTouchMove: function () {
 },
 /**
  * 隐藏模态对话框
  */
 hideModal: function () {
  this.setData({
  showModal: false
  });
 },
 /**
  * 对话框取消按钮点击事件
  */
 onCancel: function () {
  this.hideModal();
 },
 /**
  * 对话框确认按钮点击事件
  */
 onConfirm: function () {
  this.hideModal();
 }
})

实现思路解读及原理

界面解读:

用一个蒙层+弹窗来组成,用绑定的数据{{showModal}}来控制弹窗的显示和隐藏

事件及方法解读:
让弹窗显示的方法:

showDialogBtn: function() {
  this.setData({
  showModal: true
  })
 }

让弹窗消失的方法:

hideModal: function () {
  this.setData({
  showModal: false
  });
 }

这里有个要特别注意的地方,就是下面这个方法:

preventTouchMove: function () {
 }

为什么是空方法?因为要结合界面wxml看,蒙层view里有一个事件绑定catchtouchmove="preventTouchMove"。这养写的原因是阻断事件向下传递,避免在弹窗后还可以点击或者滑动蒙层下的界面。如果不这样写的话,如果主界面是一个可以滚动的界面,想想看,当弹窗弹出的时候用户还可以操作滚动列表,我想你的产品经理会来找你的。

 3. 样式解读:(这个标题没加代码块标识,但还是像代码块一样被显示了,这是个bug!!!- -)

.modal-mask和.modal-dialog样式的写法需要特别注意。

主要是层级关系,弹窗要保证在最上层,不被界面遮挡,然后蒙层要遮挡住界面,但是不可遮挡弹窗。所以.modal-mask和.modal-dialog的z-index值要注意。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 #Javascript
JavaScript实现三级联动菜单效果
Aug 16 #Javascript
ionic3 懒加载
Aug 16 #Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 #Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 #Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 #Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 #Javascript
You might like
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php常用表单验证类用法实例
2015/06/18 PHP
十大使用PHP框架的理由
2015/09/26 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
对VUE中的对象添加属性
2018/09/18 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
python生成器generator用法实例分析
2015/06/04 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
用 python 进行微信好友信息分析
2020/11/28 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
客户接待方案
2014/02/26 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书