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

╰+哭是因爲堅強的太久メ 2021-06-26 16:06 588阅读 0赞

--------------------

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

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaWRvbmdfeQ_size_16_color_FFFFFF_t_70][]

# 为什么要自定义模态框？ #

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

# 效果图 #

![在这里插入图片描述][20190423145403281.gif]

# 实现思路 #

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

# 界面代码 #

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" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入您的求职意向"></input>
            </view>
        </view>
        <view class="modal-footer">
            <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
            <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
        </view>
    </view>

# 样式代码 #

index.wxss

/* 自定义弹窗样式 */
    .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: -180rpx 105rpx;
      border-radius: 36rpx;
    }
    
    .modal-title { 
      padding-top: 50rpx;
      font-size: 45rpx;
      color: #030303;
      text-align: center;
    }
    
    .modal-content { 
      padding: 50rpx 32rpx;
    }
    
    .modal-input { 
      display: flex;
      background: #fff;
      border: 2rpx solid #ddd;
      border-radius: 4rpx;
      font-size: 35rpx;
    }
    
    .input { 
      width: 100%;
      height: 82rpx;
      font-size: 35rpx;
      line-height: 35rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      color: #333;
    }
    
    input-holder { 
      color: #666;
      font-size: 35rpx;
    }
    
    .modal-footer { 
      display: flex;
      flex-direction: row;
      height: 86rpx;
      border-top: 1px solid #dedede;
      font-size: 40rpx;
      line-height: 86rpx;
    }
    
    .btn-cancel { 
      width: 50%;
      color: #666;
      text-align: center;
      border-right: 1px solid #dedede;
    }
    
    .btn-confirm { 
      width: 50%;
      color: #ec0033;
      text-align: center;
    }
    /* 自定义弹窗样式 */

# 逻辑代码 #

index.js

Page({ 
        /** * 页面的初始数据 */
        data: { 
            showModal: false,
            inputValue: null
        },
        /** * 弹窗 */
        showDialogBtn: function() { 
            this.setData({ 
                showModal: true
            })
        },
        /** * 弹出框蒙层截断touchmove事件 */
        preventTouchMove: function() { 
            return
        },
        /** * 隐藏模态对话框 */
        hideModal: function() { 
            this.setData({ 
                showModal: false
            });
        },
        /** * 对话框取消按钮点击事件 */
        onCancel: function() { 
            this.hideModal();
        },
        /** * 对话框确认按钮点击事件 */
        onConfirm: function() { 
            this.hideModal();
        },
    
        /** * 获取输入框中输入的值 */
        inputChange:function(option){ 
            /* 把文本框输入的内容方到 data 里面 */
            this.setData({ 
                inputValue: option.detail.value
            })
        }
    })

# 解读 #

preventTouchMove: function() { 
            return
        }

<table> 
 <tbody> 
  <tr> 
   <td>结合界面代码（index.wxml）来看，蒙层 view 里有一个事件绑定 catchtouchmove="preventTouchMove"。这样写的原因是阻断事件向下传递，避免在弹窗后还可以点击或者滑动蒙层下的界面。</td> 
  </tr> 
 </tbody> 
</table>

[http_zwd596257180.gitee.io_blog_2019_04_23_wechat_custom_model]: http://zwd596257180.gitee.io/blog/2019/04/23/wechat_custom_model/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaWRvbmdfeQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190423144945781.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaWRvbmdfeQ==,size_16,color_FFFFFF,t_70
[20190423145403281.gif]: https://img-blog.csdnimg.cn/20190423145403281.gif