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


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 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
原生JS实现pc端轮播图效果
Dec 21 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
请说出以下代码输出什么
2013/08/30 面试题
祖国在我心中演讲稿200字
2014/08/28 职场文书
水电施工员岗位职责
2015/04/11 职场文书
停课通知书
2015/04/24 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
庆七一晚会主持词
2015/06/30 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python