本文实例为大家分享了微信小程序自定义支持图片的弹窗,供大家参考,具体内容如下
为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"。
这养写的原因是阻断事件向下传递,避免在弹窗后还可以点击或者滑动蒙层下的界面。
如果不这样写的话,如果主界面是一个可以滚动的界面,想想看,当弹窗弹出的时候用户还可以操作滚动列表。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
第一课趣味二进制——修改植物大战僵尸数据 任务介绍 学习目标 知识需求 需求工...
文章目录 前言 本周最重要的五件事情 本周搞砸的四件事情 本周的四个启发 前言 ...
2 月 18 日消息 据外媒 Windowslatest 报道,在预览版本中发现的参考资料表明,...
IT之家2月18日消息外媒 Windows Latest 报道,微软正在与谷歌合作进行一项新的改...
昨天刚学了html的一些内容,就迫不及待的想做个京东上面的搜索条,结果做是做出...
一.前言 .NET Core 是一个通用开发平台,由 Microsoft 和 GitHub 上的 .NET 社区...
首先插件配备好了,写一个HTML测试一下 首先创建一个文件夹,创建一个HTML 文件...
在项目开始之前我们可以先去了解一下IConfiguration接口,.Net Core Web应用程序...
1.ajax跨域传递值是所需要的回传的类型为jsonp $.ajax({url: "http://.......",t...
JSP spring boot / cloud 使用filter防止XSS 一.前言 XSS(跨站脚本攻击) 跨站脚...