小程序模态框弹出全屏

最新推荐文章于 2024-08-15 23:03:45 发布

小吖么小夏夏

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量1.7k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43246468/article/details/103635127

版权

本文介绍了如何在小程序中封装一个全屏的Modal组件，包括创建组件文件、在页面JSON中引用、WXML调用及JS交互，实现灵活的模态框弹出效果。

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

modal的含多选的全屏弹窗

**封装modal*

首先在你存放自定义组件的文件夹里新建个 modal 文件夹，一般都将所有组件都放在 components 下面。

然后右键新建 component，因为要作为组件引入到页面中

代码

modal.wxml


<view hidden='{
  {modalHidden}}'>  
  <view class='mask_layer' />  
  <view class='modal_box'>  
    <view class="title">
      <text class="closecate"  bindtap='modal_click_Hidden' >×</text>
      <text>选择分类</text>
    </view>  
    <view class='content'>  
     <checkbox-group bindchange="checkboxChange">
        <label class="linebox" wx:for="{
  {items}}">
          <checkbox value="{
  {item.name}}" checked="