小程序开发——如何对活动弹窗中的透明元素进行定位

需求是：我们的弹出层仅仅是一张图片，用户在点击特定位置时触发点击回调。

思路是：创建透明元素，置于图片容器内，并定位到相关的位置。

问题是：不同机型的尺寸不一，怎么保证透明元素准确的定位呢？

方案是：统一度量衡

例子

如图我们有2个按钮需要定位 【点我优惠升级】和【残忍拒绝】

一、只需要解决背景图片容器的尺寸设置问题，透明元素的定位也就解决了。

这关乎容器内两个子元素 绝对定位 于父元素的位置表现

❓ 通常我们会习惯以百分比宽为宽， 百分比高为高来给元素一个宽高比 。

❓ 但诸如IPHONE X 等全面屏幕之后的机型，长宽比更大了。也就是说屏幕没更宽却更长。

这会导致在某些机型上 图片尺寸比例是对的 ，而某些机型却不行。

// 例如❌
.图片容器{
  width: 百分比宽%;
  height:百分比高%;
}

//或者❌
.图片容器{
  width: 百分比宽vw;
  height:百分比高vh;
}

.透明元素{
    //...子绝父相定位
}

1. 使用宽高比作为宽高单位在不同机型上的表现

可以看到首先背景图显示不全了（顶部尤为明显），其次是按钮的位置（红、绿色块）定位出现偏差

解决的办法很简单

// ✅只需要改变单位即可 。如统一采用视高，或视宽 

.图片容器{
  width: 百分比宽 vw;
  height:百分比高 vw;
}

.透明元素{
    //...子绝父相定位
}

2. 使用宽作为宽高单位在不同机型上的表现

可以看到背景图的显示比例是正确的，按钮的位置也基本没变

这样不论设备宽高比是 3：9 还是3：10...，只要用相同的基准值来设置尺寸，容器宽高比就不变，内部子元素的定位也都不会产生变化。

二、另外这里是完整的 view + css 的结构

view结构

<view id='part-pay-modal' a:if="{{pageLoad}}">
    <!-- 1 -->
    <view a:if="{{ show1 }}" class="part-pay-modal" onTap="handleHideModal">
        // 图片容器 为父元素
        <view class="part-pay-1-modal-content">
            // 透明元素 为子元素
            <view class="part-pay-content-get" onTap='userClickGet'></view>
            <view class="part-pay-content-cancel" onTap='userClickReject'></view>
        </view>
        <text class="iconfont icon-clear"></text>
    </view>
</view>

css结构

/* 整个背景的遮罩 */

#part-pay-modal .part-pay-modal {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 999;
}

/* 背景图的容器 */

#part-pay-modal .part-pay-1-modal-content {
    position: relative;
    background: url('/images/partPay/part-pay-modal-1.png') center no-repeat;
    background-size: 100% auto;
    // 🔴 这里我们使用图片原始的比例设置宽与高；并使用统一的单位vw 或其他亦可。
    ✅width: 85vw; 
    ✅height: 113vw;
}

// ✅其余的部分 根据子绝父相 进行定位即可

/* 透明按钮1 xxxxx */

#part-pay-modal .part-pay-content-get {
    position: absolute; 
    left: 15%;
    right: 15%;
    top: 75%;
    height: 12%;
    z-index: 99;
}

/* 透明按钮2 xxxxx */

#part-pay-modal .part-pay-content-cancel {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 89%;
    height: 12%;
    z-index: 99;
}

/* 关闭图标 */

#part-pay-modal .icon-clear {
    opacity: 0.5;
    color: var(--color-white);
    font-size: 0.6rem;
    position: absolute;
    right: 7.8vw;
    top: 18vw;
    z-index: 99;
}

最后回头又想，肯定是还有更好的方案的..还望读者！

不吝赐教呀！