把视频固定在页面顶端的奇怪问题

Question

需求：把视频播放器固定在页面顶部，像腾讯视频小程序播放页面那样。下面的内容可以上下滚动。本来是一个极其简单的需求，不过一个莫名的问题。先上代码。

wxml

<view class="video">
 <video autoplay="true" controls="controls" src="{{ videoUrl }}" ></video>
</view>
 
<scroll-view class="main">
  <view>
 
    <view class="item" bindtap="openVideo">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
  </view>
</scroll-view>

wxss

video {
  width: 100%;
  height: 400rpx;
}
 
.video{
  position: fixed;
  width:100%;
  top:0rpx;
  height: 400rpx;
  z-index: 999;
  background-color: red;
 
}
 
.main {
  box-sizing: border-box;
  height: 100%;
  margin-top: 420rpx;
  line-height: 2;
}

基本思路就是使用fixed方式固定。下面可以滚动的内容放在scroll-view里面。

问题现象：

这个代码在模拟器运行是完成正常的，能实现固定视频播放器的效果。但是在苹果真机运行时，如果往上滚动，就会把视频顶上去，固定那个view显示黑色框。

尝试过的方法：

不把fixed加在view，直接写在video标签上，无效。

请各位大牛高手看看帮忙解决一下，谢谢。

Answer 1

1. video fixed布局会造成：视频移动，黑色底留下

2. flex布局，video固定高度，自适应部分用scroll-view, 代码如下：

   <view class="grid-box">
       <view class="grid-const">
            <video src=""></video>
       </view>
       <view class="grid-var">
           <scroll-view class="content" scroll-y="true">
                  ...
           </scroll-view>
         </view>
   </view>
   .grid-box{
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
   }
   .grid-const{width: 750rpx;height: 422rpx;}
   .grid-var{flex: 1;}
   .content{height: 100%;}

   以上代码可以满足需求，但是下拉页面，video还是会跟着移动

3. 最终解决方案，禁止页面Page滚动：
   在json配置文件中添加："disableScroll":true
   经测试，页面效果和腾讯视频一致

Answer 2

.main {
  position: fixed;
  top:420rpx;
  box-sizing: border-box;
  height: 50vh;
  line-height: 2;
}

这样试试。

Answer 3

wxml

<view class="video">
 <video autoplay="true" controls="controls" src="{{ videoUrl }}" ></video>
</view>
 
<scroll-view class="main" scroll-y="true">
  <view>
 
    <view class="item" bindtap="openVideo">
      <text>微信小程序第一课1</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>

    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>

    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课</text>
    </view>
 
    <view class="item">
      <text>微信小程序第一课111</text>
    </view>
 
  </view>
</scroll-view>

wxss

page {
  overflow-y: none;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}
 
.video{
  position: fixed;
  width:100%;
  top:0;
  height: 30vh;
  z-index: 999;
  background-color: red;
 
}
 
.main {
  box-sizing: border-box;
  height: 70vh;
  line-height: 2;
  position: fixed;
  bottom: 0;
}

好久以前的问题啊，^w^

Answer 4

怎么解决啊，也没大神解答