微信小程序之自定义模态框

程序东

于 2019-04-23 15:12:42 发布

阅读量2.5k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weidong_y/article/details/89473220

版权

本文介绍了如何在微信小程序中自定义模态框，因官方模态框的灵活性不足，作者提供了一种实现思路：使用蒙层配合自定义弹窗，并通过状态值控制弹窗的显示和隐藏。文章包括效果图、界面代码、样式代码和逻辑代码的展示。

摘要由CSDN通过智能技术生成

此文章已经同步更新到个人博客上，喜欢有侧边栏目录的同学，可以点击下面的链接跳转到个人博客上读阅噢。
个人博客地址：http://zwd596257180.gitee.io/blog/2019/04/23/wechat_custom_model/

为什么要自定义模态框？

因为官方提供的模态框缺乏灵活性，无法满足每个人的需求，所以我们可以根据自己的实际需求来实现自定义模态框。

效果图

在这里插入图片描述

实现思路

通过一个蒙层+自定义的弹窗来实现上图的效果，而弹窗的消失与出现则通过一个状态值来控制即可。

界面代码

index.wxml

<!-- 请在需要触发弹窗的地方添加以下函数，可以是按钮或者文本框 -->
bindtap="showDialogBtn"

<!-- 自定义弹窗 -->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="true" wx:if="{
    {showModal}}"></view>
<view class="modal-dialog" wx:if="{
    {showModal}}">
    <view class="modal-title">修改求职意向</view>
    <view class="modal-content">
        <view class="modal-input">
            <input placeholder-class="input-holder"

最低0.47元/天解锁文章