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


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比较两个时间大小的简单示例代码
Dec 20 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
jquery常用的12个小功能
Jul 22 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
Java中final关键字详解
2015/08/10 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python excel多行合并的方法
2020/12/09 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
高三地理教学反思
2014/01/11 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
云台山导游词
2015/02/03 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
理想国读书笔记
2015/06/25 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL