微信小程序解决视频在真机不能相对定位问题

微信小程序解决视频在真机不能相对定位问题

   微信小程序中对视频设置相对屏幕定位会出现，在模拟器上运行正常，在真机上运行不正常的问题。

解决方法：

通过盒子模型(flex)布局解决该问题。

实现代码：

 wxml：

<view class="MainContent">
<view class="TopBlock">

  TopBlock

</view>
<view class="BottomBlock">
<scroll-view class="ScrollView" scroll-y="true">

   <text>……</text>
 
  </scroll-view>
</view>
</view>


 CSS：
page {
display: flex;
height: 100%;
width: 100%;
}

.MainContent {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}

.TopBlock {
height: 200rpx;
}

.BottomBlock {
display: flex;
flex: 1;
overflow: auto;
}

重点在CSS的.BottomBlock里得写上overflow-y:auto，否则在开发工具上虽然能显示正常，但真机调试里还是显示错误