微信小程序-自定义弹出层

版权声明：部分内容借鉴其他作者，如有侵权，请与我联系 https://blog.csdn.net/crabfrog/article/details/82768295

效果图

WXML

<view class='popup' wx:if="{{popShow}}">
    <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'>
    </view>
    <!--  弹出层 -->
      <view class='popup_main' id='popup_main' >
    <!--  关闭按钮 -->
        <view class='close_wrapper'>
          <image class='close_icon' src='/images/select_icons/close.png' mode='widthFix' bindtap='closePop'></image>
        </view>
    <!-- 主要内容 -->
        <view class='pop_list_wrapper'>这里加入你想加入的内容</view>
      </view>
  </view>

WXSS

    .popup {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    }
    .popup_main {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 85%;
      transform: translate(-50%, -50%);
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      border: 5px;
      border-radius: 10px;
    }
    .close_wrapper {
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .close_icon {
      width: 16px;
    }

JS

 data: {
/** 弹出层 **/
    popShow: false,
}

  /**
   * 弹出层
   */

  // 打开弹窗
    popupTap: function (e) {
    this.setData({
      popShow: true
    })
  },
  // 关闭弹窗
  closePop: function (e) {
    this.setData({
      popShow: false
    })
  },
  // 这个函数内容为空 用于阻止屏幕滚动
  preventTouchMove: function (e) {
  },