[移动开发]小程序 video 组件在真机上固定在顶部样式失效

这篇文章，是我在开发小程序的时候，在一个页面中想要实现，上面是一个固定的视频区域，下面试可以滚动的其他信息区域。但是小程序的 video 标签，使用 fixed 或者是 sticky 进行定位在顶部后，在真机上测试会有问题。下面我就来解决这个问题

目录

1、概述

???????我想做的样式是，让 mv 视频固定在页面的顶部，下面的信息区域可以进行上下滚动，但是如果直接渲染的话会存在问题，在真机上调试，video 标签会跟随滚动，并不会固定在顶部，如下图所示：

2、解决方法

???????这里我改了半天，终于解决掉该问题了，解决方法如下：

1. 需要将下面渲染的要进行滚动的数据，使用 scroll-view 标签进行包裹，并且需要给这个标签设置一个固定的高度，不能是百分比，因为每一个手机的屏幕尺寸都不同，需要动态的进行改变其高度，所以我在 index.js 中的 data 设置一个 scroll-view 区域高度的值：scrollViewHeight
   

2. 在 index.js中需要动态的获取页面的尺寸，那下满 scroll-view 滚动区域的高度应该为：整个屏幕的高度 - 顶部导航区域的高度（包括了手机的状态栏高度 + 微信小程序顶部的导航高度）- video 视频高度。知道了如何求高度后，就开始进行处理操作
   

3. 小程序有一个方法：wx.getSystemInfo()，官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html，该方法的回调函数中的 result 参数，就是该设备的各项尺寸参数。我需要用到的参数有：

   1. result.screenHeight：整个屏幕高度，单位 px
   2. result.screenTop：设备状态栏高度 + 微信小程序上面导航栏的高度

4. 还需要获取到 video 标签的高度，小程序中使用获取节点的方法来进行取得节点的属性值，首先给 video 标签设置一个 id=“video” 的 id 值；然后使用 wx.createSelectorQuery() 方法创建节点选择器；最后调用 query.select(’#video’).boundingClientRect().exec((res) => {}) 方法获取该节点的各项属性
   

5. 获取到了需要的参数后，在 onLoad 声明周期中进行动态设置 scroll-view 的高度，如下
   

6. 在真机上面调试的结果很满意！