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


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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
js实现自定义路由
Feb 04 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 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 判断变量类型实现代码
2009/10/23 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Flask-WTF表单的使用方法
2019/07/12 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
车间组长岗位职责
2013/12/20 职场文书
四风问题对照检查材料
2014/09/22 职场文书
家庭困难证明
2014/10/12 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书