微信小程序 自定义showmodal 弹出框
最近一直忙着修改bug 增加新功能，好久没总结了，也不知道该总结啥，先写一个自定义showmodal框吧。
废话少说直接上代码：
wxml部分```wxml
{{title}}
{{message}}
```
wxss部分```wxss.mask {
position: fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color: rgba(0,0,0,0.5);
}
.content {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
text-align: center;
}
```
js部分```javascriptPage({
data: {
title: '',
message: '',
showmodal: false,
},
catchTouchMove(e) {
if (e.detail.scrollTop >100) {
this.setData({ showmodal: true });
}
},
confirm() {
this.setData({ showmodal: false });
// 确认按钮点击事件 },
cancel() {
this.setData({ showmodal: false });
// 取消按钮点击事件 },
});
```
自定义showmodal框的实现原理
1. 首先，我们创建一个`mask`类的view，用于覆盖整个页面。这个view的背景色为半透明，以便于用户仍然可以看到页面内容。
2. 在`mask`类的view内部，我们创建一个`content`类的view，用于显示自定义的弹出框内容。
3. 当用户触摸屏幕时，如果滚动距离超过100px，我们就设置`showmodal`为true，显示自定义的弹出框。
4. 在弹出框中，我们提供两个按钮：确认和取消。点击这些按钮后，我们会关闭弹出框并执行相应的事件。
注意事项
* `catchTouchMove`事件需要在`mask`类的view上设置，以便于捕捉用户的触摸移动事件。
* `confirm`和`cancel`函数需要在页面的js部分定义，以便于处理弹出框中的按钮点击事件。
* `showmodal`数据项需要在页面的data中定义，以便于控制弹出框的显示状态。
总结
自定义showmodal框是微信小程序开发中常见的需求之一。通过本文的实现原理和代码示例，你可以轻松地创建一个自定义的弹出框，提高用户体验和交互性。
