fixed实现遮罩层，小程序

标签：direct   enter   data   weight   center   class   png   ges   技术   

css

/** 分享微信，分享朋友圈 **/
.goods_share_mask {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  transition: transform 0.3s ease-in-out;
  .goods_share_box {
    border-radius: 10px 10px 0px 0px;
    height: 370rpx;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    .title {
      text-align: center;
      width: 750rpx;
      height: 106rpx;
      line-height: 106rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: rgba(69, 69, 69, 1);
      border-bottom: 1px solid #dddddd;
      position: relative;
      .close_icon {
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        top: 40rpx;
        right: 30rpx;
      }
    }
    .content {
      height: 263rpx;
      display: flex;
      .item {
        width: 375rpx;
        text-align: center;
        display: flex;
        flex-direction:column;
        .img {
          width: 80rpx;
          height: 80rpx;
          margin-top: 70rpx;
        }
        .text {
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(130, 130, 130, 1);
        }
      }
    }
  }
  .goods_share_mask_hidden {
    @extend .goods_share_mask;
    transform: translateY(100%);
    visibility: hidden;
  }
}

html

<!-- 弹出层 -->
<view class="{{hiddenWxShare ? ‘goods_share_mask_hidden‘ : ‘goods_share_mask‘}}" catch:tap="closeWxShare" catch:touchmove="_stopTap">
    <!-- 内容层 -->
    <view class="goods_share_box" catch:tap="_stopTap">
        <view class="title">
            分享至
            <image class=‘close_icon‘ src="/images/share/close.png" catch:tap="closeWxShare"></image>
        </view>

        <view class="content">
            <view class="item">
                <view>
                    <image class=‘img‘ src="/images/share/wx.png"></image>
                </view>
                
                <text class="text">微信好友</text>
            </view>
            <view class="item">
                <view>
                <image class=‘img‘ src="/images/share/friend.png"></image>
                </view>
                <text class="text">微信朋友圈</text>
            </view>
        </view>
    </view>
</view>  

js

Page({
  data: {
    hiddenWxShare: true,
  },
  _stopTap() {
    return;
  },
  closeWxShare() {
    this.setData({ hiddenWxShare: true });
  },
  showWxShare() {
    this.setData({ hiddenWxShare: false });
  }
});

fixed实现遮罩层，小程序

标签：direct   enter   data   weight   center   class   png   ges   技术   

原文地址：https://www.cnblogs.com/jiqing9006/p/12769294.html