原创 开发&源码 微信小程序 ·

微信小程序:带输入栏的选择项蒙版弹窗

有一段时间没弄小程序了,现在新增一需求,需要在点击取消按钮时选择取消原因。于是,又开始折腾...

蒙版实现

看到这个需求,第一想法是点击后弹出一个蒙版弹窗,里面带有选择项按钮。于是,在之前的页面上,增加一个半透的view,在这个view中添加想要的各种控件。

于是,在wxml中加入:

css为:

底部窗体

我们想让内容显示在最底部,于是改为:

css增加:

最终效果

我们还需要增加一些其他功能,如点击蒙版区域自动消息、移除蒙版下方原页面的滑动事件、只有点击某按钮才显示蒙版弹窗、取消原因分两列显示,点击其他原因可手动输入等...

css为:

在使用,通过点击原页面“取消”按钮,调用this.showMaskWindow()即可显示该蒙版弹窗

简书:ThinkinLiu 博客: IT老五

这些差不多算是全部代码了,当然如果想看完整的,点下面链接进入:
Github源码: https://github.com/ThinkinLiu/MaskWindow

参与评论