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


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 相关文章推荐
列表内容的选择
Jun 30 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
javascript表单正则应用
Feb 04 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
基于jquery的超简单上下翻
2010/04/20 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python的Template使用指南
2014/09/11 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python构造IP报文实例
2020/05/05 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
大学生学习生活的自我评价
2013/11/01 职场文书
优秀生推荐信范文
2013/11/28 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
环保建议书500字
2014/05/14 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
法人身份证明书
2014/10/08 职场文书
领导班子整改方案
2014/10/25 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
安全生产培训心得体会
2016/01/18 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang