一、参考资料
参考资料1:微信小程序——自定义个性化模态框(附代码)
参考资料2:小程序自定义modal弹窗封装实现
二、效果展示
小程序本身提供了wx.showModal的弹窗方式,但只局限于用户有两个选择的点击(比如说两个按钮时确定和取消),我们在多种信息的展示和选择的时候可以采用自定义弹窗的方式,效果如下:
这种自定义弹窗在点击叉号时可以关闭弹出框,可以在弹出框内进行checkbox的选择以及文字的输入,唯一的缺点是点击旁边的灰色区域不会关闭弹出框
三、代码实例
附上xml js css代码
xml:
<view class="substitution_65" bindtap="findprodq"><text>出现问题?</text>
</view>
//这部分相当于绑定了弹出内容层的事件
<view class="content" hidden="{{flag}}" >
<view class="findprodq_100" >
//这里面填入你想显示的内容 是整个内容层部分
<view class="findprodq_101" bindtap="closeprodq">
<text class="iconfont iconclosepro" style='float:right'></text>
</view>
</view>
</view>
js:
data:{
flag: true, //弹出层显示与否
disabled: true, //是否可用
}
findprodq: function () {
this.setData({
flag: false
});
},
closeprodq: function() {
this.setData({
flag: true,
disabled: true,
})
},
wxss:
.content{
height:100%;
width:100%;
position:fixed;
top:0px;
background:rgba(0,0,0,0.4);
overflow: hidden;
}
.findprodq_100{
width:600rpx;
position: fixed;
height:760rpx;
clear:both;
float:left;
text-align:left;
margin-left:76rpx;
border-radius: 16rpx;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.09);
margin-top: 200rpx;
background: #fff;
}
.findprodq_100 .findprodq_101{
width:57rpx;
height:57rpx;
margin-top:18rpx;
margin-left:517rpx;
float:left;
position: absolute;
text-align:left;
}
内容层:弹出框部分
遮罩层:灰色的背景部分
相当于先做一个灰色的背景覆盖整个屏幕,然后再做一个白色的内容框
xml中的关键部分为:<view class="content" hidden="{{flag}}" >
这部分的flag标签设定的是整个内容层+遮罩层的显示与否 就是点击“出现问题?”后现在界面的全部
wxss中的关键部分是.content
的设置,如果想覆盖全屏height:100%;width:100%;
背景一定要设置透明度background:rgba(0,0,0,0.4);
js中绑定事件的不同来控制data中flag的值,进而控制弹出框的显示与否
四、结语
欢迎大家在评论讨论代码或者指出bug,会编辑修正,谢谢