zoukankan      html  css  js  c++  java
  • 小程序自定义弹窗【解决点透问题】

    1. <view class="wx-popup" hidden="{{ flag }}" catchtouchmove="true" catchtap='onClose'>
           <view class='popup-container'>
                <view class="wx-popup-release-tip" catchtap='onPrevent'>
                    <view class="item">
                         <view class="desc">您的通知已发送成功!</view>
                    </view>
                </view>
                <view class="releaseConfirm">
                     <view class="btn-ok" catchtap='onClose'>知道了</view>
                </view>
           </view>
      </view>
      

        

    2. .wx-popup {
        position: absolute;
        left: 0;
        top: 0;
         100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
      
      .wx-popup .popup-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
         640rpx;
        height: 320rpx;
        border-radius: 16rpx;
        overflow: hidden;
        background: #fff;
      }
      
      .wx-popup .popup-container .wx-popup-release-tip {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1
      }
      
      .wx-popup .popup-container .wx-popup-release-tip .item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .wx-popup .popup-container .releaseConfirm {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30%;
        color: #576b95;
        border-top: 1px solid #f5f5f5;
      }
      
      .wx-popup .popup-container .releaseConfirm .btn-ok {
         100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #576b95;
        font-size: 16px;
      }
      

        

    3. data: {
         flag: true 
      }
      
      // 关闭弹出层时触发 == 点击遮罩层和弹框确定按钮时触发
      onClose(e) {
        console.log('e',e)
        this.setData({ 
          flag: true
        });
      },
      
      // 点击弹框提示部分时触发,用于解决点透问题
      onPrevent() {
      //无需任何逻辑
      }
      

        

    声明:此资源由本博客收集整理,只用于记录心得和交流学习,请勿用作它途。如有侵权,请联系, 删除处理。
  • 相关阅读:
    缓存Cache
    RDD的行动操作
    redis数据库的配置
    requests的封装(user-agent,proxies)
    phantjs
    python多线程
    etree-xpath
    Flask
    Flask
    Flask
  • 原文地址:https://www.cnblogs.com/jzyu/p/13594719.html
Copyright © 2011-2022 走看看