小程序原生组件live-player的踩坑记录——同层渲染问题

前言

公司有这么个需求，当有置顶的直播时候，小程序的首页会显示一个可拖动的直播悬浮窗。开发的思路很简单，就是使用 movable-area和movable-view组件实现拖动功能。但今天的主题不是这两个组件，而是live-player组件。

问题描述

开发完成后，在开发者工具和安卓手机上都表现正常，但是在ios手机上就会出现下面的情况，

随着悬浮窗的拖动，直播组件上定位的元素会消失。

相关代码

<movable-view wx:if="{
     
     {topLiveRoomParam.pullUrl}}" class="movable_living_panel" direction="all" animation="{
     
     {false}}" x="750rpx" y="{
     
     {movableViewY}}" >
  <view class="play_living_panel" bindtap="goLiveRomm">
    <live-player class="play_view" src="{
     
     {topLiveRoomParam.pullUrl}}" muted="{
     
     {true}}" autoplay="{
     
     {true}}" 	object-fit="fillCrop" ></live-player>
    <image class="close_icon" bindtap="closeLivingPanel" src="https://static.jingrizf.com/file/25ef4654-8c6f-48ec-97d9-a43d50c79dad.png" />
    <image class="bottom_icon" src="https://static.jingrizf.com/file/91f82b70-8135-4859-9de6-f23306daed05.png" />
  </view>
</movable-view>


 .play_living_panel{
    height: 100%;
    width: 100%;
    border-radius: 6rpx;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.50) 1%, rgba(0,0,0,0.00) 100%);
    position: relative;
    transform: rotate(0);
    overflow: scroll; //解决方法
    .play_view{
        height: 100%;
        width: 100%;
        position: relative;
        transform: rotate(0);
        z-index: 9;
    }
    .close_icon{
        width: 26rpx;
        height: 26rpx;
        position: absolute;
        left: 11rpx;
        top: 16rpx;
        transform: rotate(0);
        z-index: 999;
    }
    .bottom_icon{
        position: absolute;
        width: 220rpx;
        height: 44rpx;
        bottom: 0;
        left: 0;
        right: 0;
        transform: rotate(0);
        z-index: 999;
    }
}

解决方案

解决方法已经在代码中写出来了，就是直播组件的容器上加上overflow: scroll;这个样式。

之前我的思路是设置定位的层级z-index，但是没有用，后来查看小程序文档，live-player是原生组件，原生组件本来默认的层级是高于非原生组件的，且通过设置z-index无效的。但是，小程序现在已经支持原生组件的同层渲染，但是为什么还会出现这个问题呢，我查找资料，找到ios上实现同层渲染的原理，然后找到答案了