1、页面初始化（滚动前）时，video所在位置

　　

2、页面滚动后，video视频组件所在位置

　　

看了别人家的小程序并不会出现这种状况。最后检查发现，是页面包裹层设置了 height:100% 导致的

顺便记录下video组件使用注意事项：

1、video优先级最高，不能通过z-index设置显示的优先级

2、不要在 scroll-view、swiper、picker-view、movable-view 中使用video。（在scroll-view中使用一样出现浮动的问题，估计与scroll-view必须设置一个高度有关）

3、css动画在video中无效

微信小程序 video组件 不随页面滚动的更多相关文章

  1. 微信小程序 - video组件poster无效 / 视频播放列表

    在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...

  2. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  3. 微信小程序video组件出现无法播放或卡顿

    微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.

  4. 微信小程序 video组件----真机测试position:fixed无效 且有黑底

    1.问题描述 video组件fixed后,视频随页面滚动,且有个黑色底停留在页面. 页面滚动前 滚动后 这里贴一下修改前代码,在微信开发者工具看是没有任何问题的.在手机端测试就有以上的问题 <v ...

  5. 第七篇、微信小程序-video组件

    主要属性: 效果图: ml: <View>1.播放网络视频</View> <view > <video style="width: 100%;hei ...

  6. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  7. 小程序 video 组件同层渲染公测

    小程序 video 组件同层渲染公测   各位开发者: 大家好. 小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制,为了方便开发者更好地使用原生组件进行开发,我们对小程序原生组件引入了 ...

  8. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  9. 微信小程序自定义组件，提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

随机推荐

  1. CodeForces E. Goods transportation【最大流+dp最小割】

    妙啊 首先暴力建图跑最大流非常简单,s向每个i连流量为p[i]的边,每个i向t连流量为s[i]的边,每个i向j连流量为c的边(i<j),但是会又T又M 考虑最大流=最小割 然后dp求最小割,设f ...

  2. nmcli 学习小结

    nmcli 是Redhat提供的网络配置编辑工具, 它可直接编辑/etc/sysconfig/network-scripts/ifcfg-xxx , 它是NetworkManager服务的客户端工具, ...

  3. Allure对单测结果以及robotframework结果的处理

    Allure对单测结果以及robotframework结果的处理 Allure只能针对pytest的单测结果生成相应的报告: 如果需要对unittest的测试框架结果进行展示,可以使用pytest执行 ...

  4. Manven下载

        1.下载地址:http://maven.apache.org/download.cgi          2.点击下载链接          3.解压zip到安装路径  我的:C:\Progr ...

  5. [CF997E] Good SubSegment

    Description Transmission Gate 给你一个长度为n的排列P,定义一段子区间是好的,当且仅当这个子区间内的值构成了连续的一段.例如对于排列\(\{1,3,2\}\),\([1, ...

  6. _bzoj1014 [JSOI2008]火星人prefix【Splay】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1014 天,写kth()时,把判断条件k <= siz[ch[x][0]]错写成了k & ...

  7. 题解报告：hdu 1124 Factorial（求N！尾数有多少个0。）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1124 Problem Description The most important part of a ...

  8. 423 Reconstruct Original Digits from English 从英文中重建数字

    给定一个非空字符串,其中包含字母顺序打乱的英文单词表示的数字0-9.按升序输出原始的数字.注意:    输入只包含小写英文字母.    输入保证合法并可以转换为原始的数字,这意味着像 "ab ...

  9. ambari-server启动报错500 status code received on GET method for API：/api/v1/stacks/HDP/versions/2.4/recommendations Error message : Server Error解决办法（图文详解）

    问题详情 来源是,我在Ambari集群里,安装Hue. 给Ambari集群里安装可视化分析利器工具Hue步骤(图文详解 所遇到的这个问题. 然后,去ambari-server的log日志,查看,如下 ...

  10. sdut1933WHUgirls(dp)

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1933 矩形的dp一般挺类似  大的矩形都是由小 ...