微客导航 » 文章资讯 » 微信小程序自定义支持图片的弹窗

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

2023-07-08 01:01:02 352

本文实例为大家分享了微信小程序自定义支持图片的弹窗，供大家参考，具体内容如下

为index.wxml添加如下图代码：(微信小程序-canvas层级最高问题，如何超越canvas的层级,只能使用cover-view标签)



弹窗





{{modal.title}}




{{modal.cancel}}
{{modal.ok}}

修改样式文件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:-180rpx105rpx;
border-radius:36rpx;
}
.modal-title{
padding-top:50rpx;
font-size:36rpx;
color:#030303;
text-align:center;
}
.modal-content{
padding:50rpx32rpx;
}
.modal-input{
display:flex;
background:#fff;
border:2rpxsolid#ddd;
border-radius:4rpx;
font-size:28rpx;
}
.input{
width:100%;
height:82rpx;
font-size:28rpx;
line-height:28rpx;
padding:020rpx;
box-sizing:border-box;
color:#333;
}
input-holder{
color:#666;
font-size:28rpx;
}
.modal-footer{
display:flex;
flex-direction:row;
height:86rpx;
border-top:1pxsolid#dedede;
font-size:34rpx;
line-height:86rpx;
}

.btn-cancel{
width:50%;
color:#666;
text-align:center;
border-right:1pxsolid#dedede;
}
.btn-confirm{
width:50%;
color:#ec5300;
text-align:center;
}

index.js代码如下图所示：

//index.js
//获取应用实例
varapp=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"。

这养写的原因是阻断事件向下传递，避免在弹窗后还可以点击或者滑动蒙层下的界面。

如果不这样写的话，如果主界面是一个可以滚动的界面，想想看，当弹窗弹出的时候用户还可以操作滚动列表。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐