微信小程序自定义支持图片的弹窗


Posted in Javascript onDecember 21, 2020

本文实例为大家分享了微信小程序自定义支持图片的弹窗,供大家参考,具体内容如下

为index.wxml添加如下图代码: (微信小程序 - canvas层级最高问题,如何超越canvas的层级,只能使用cover-view标签)

<!--index.wxml-->

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

<!--弹窗-->

<cover-view class="modal-mask" bindtap="hideModal" wx:if="{{modal.isShow}}"></cover-view>
<cover-view class="modal-dialog" wx:if="{{modal.isShow}}" >
 <cover-view class="modal-title">{{modal.title}}</cover-view>
 <cover-view class="modal-content">
 <cover-image src="{{modal.src}}" class="img-full" style="height:auto;" mode="widthFix"></cover-image>
 </cover-view>
 <cover-view class="modal-footer" wx-if="{{modal.isFooter}}">
 <cover-view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{modal.cancel}}</cover-view>
 <cover-viewew class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{modal.ok}}</cover-viewew>
 </cover-view>
</cover-view>

修改样式文件index.wxss,样式代码如下图所示:

/index.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;
}

index.js代码如下图所示:

//index.js
//获取应用实例
var app = getApp()
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();

 }

})

运行,可以看到修改样式后的效果

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

preventTouchMove: function () { }

为什么是空方法?因为要结合界面wxml看,蒙层view里有一个事件绑定

catchtouchmove="preventTouchMove"。

这养写的原因是阻断事件向下传递,避免在弹窗后还可以点击或者滑动蒙层下的界面。

如果不这样写的话,如果主界面是一个可以滚动的界面,想想看,当弹窗弹出的时候用户还可以操作滚动列表。

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

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 #Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 #Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 #Javascript
JavaScript中arguments的使用方法详解
Dec 20 #Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
利用javascript查看html源文件
2006/11/08 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
javascript常用函数(1)
2015/11/04 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
基于js 本地存储(详解)
2017/08/16 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Python实现的批量下载RFC文档
2015/03/10 Python
python显示生日是星期几的方法
2015/05/27 Python
django模板语法学习之include示例详解
2017/12/17 Python
django初始化数据库的实例
2018/05/27 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
正风肃纪剖析材料
2014/02/18 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
杨善洲电影观后感
2015/06/04 职场文书
运动员入场前导词
2015/07/20 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL