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


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实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
详解javascript脚本何时会被执行
Feb 05 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
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python数字类型math库原理解析
2020/03/02 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
自荐信范文
2013/12/10 职场文书
实用求职信范文分享
2013/12/25 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
追悼会主持词
2014/03/20 职场文书
真诚的求职信
2014/07/04 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS