1、问题描述

  video组件fixed后,视频随页面滚动,且有个黑色底停留在页面。

  页面滚动前

  

  

  滚动后

这里贴一下修改前代码,在微信开发者工具看是没有任何问题的。在手机端测试就有以上的问题

<view style='position:fixed;top:3%;left:5%;overflow:hidden;'>
<video src='http://video.699pic.com/videos/95/44/45/5FrIddfDqFze1528954445.mp4' enable-danmu danmu-btn controls objectFit="fill" style='width:300px;height:300px;'></video>
</view> <view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
</view>

2、解决办法

  将滑动的内容用scroll-view包裹,并且给一个固定的高度,这个高度最高不要用百分比,有时不会起作用,修改后的代码如下

<view style='position:fixed;top:3%;left:5%;overflow:hidden;'>
<video src='http://video.699pic.com/videos/95/44/45/5FrIddfDqFze1528954445.mp4' enable-danmu danmu-btn controls objectFit="fill" style='width:300px;height:300px;;'></video>
</view> <scroll-view scroll-y='true' style='height:667px;'>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
<view style='width:100%;height:500px;'>sadsadsad</view>
</scroll-view>

微信小程序 video组件----真机测试position:fixed无效 且有黑底的更多相关文章

  1. 微信小程序开发之真机预览

    1:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...

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

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

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

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

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

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

  5. 微信小程序 video组件 不随页面滚动

    1.页面初始化(滚动前)时,video所在位置 2.页面滚动后,video视频组件所在位置 看了别人家的小程序并不会出现这种状况.最后检查发现,是页面包裹层设置了 height:100% 导致的 顺便 ...

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

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

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

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

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

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

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

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

随机推荐

  1. The Power of Android Action Bars(转载)

    转自:http://www.informit.com/articles/article.aspx?p=1743642

  2. strncasecmp与strcasecmp用法(转载)

    转自: http://blog.csdn.net/acb0y/article/details/5333334 strcasecmp strcasecmp(忽略大小写比较字符串)  相关函数 bcmp, ...

  3. tyvj 1666 城市建设【最小生成树】

    -Wall是个好东西,要不然我至死都看不出来我把(b[i]+b[j])写成了(b[i],b[j])-- 还是来自lyd的题解: (其实原来课件第一行式子写错了没有-1,然而我用sai手画了一个上去hh ...

  4. bzoj 3629: [JLOI2014]聪明的燕姿【线性筛+dfs】

    数论+爆搜 详见这位大佬https://blog.csdn.net/eolv99/article/details/39644419 #include<iostream> #include& ...

  5. pytest的参数化

    参数化有两种方式: 1. @pytest.mark.parametrize 2.利用conftest.py里的 pytest_generate_tests 1中的例子如下: @pytest.mark. ...

  6. 使用jquery进行跨域操作

    ajax默认是不支持跨域操作的,只能提交跨域请求,无法获得响应.而可以用$.getScript()函数来进行跨域操作.代码如下: <button id="btnTest"&g ...

  7. Xors on Segments Codeforces - 620F

    http://codeforces.com/problemset/problem/620/F 此题是莫队,但是不能用一般的莫队做,因为是最优化问题,没有办法在删除元素的时候维护答案. 这题的方法(好像 ...

  8. 随机L系统分形树 分类: 计算机图形学 2014-06-01 23:27 376人阅读 评论(0) 收藏

    下面代码需要插入到MFC项目中运行,实现了计算机图形学中的L系统分形树. class Node { public: int x,y; double direction; Node(){} }; CSt ...

  9. jdk 1.8下 java ArrayList 添加元素解析

    转载请注明http://www.cnblogs.com/majianming/p/8006452.html 有人问我,java ArrayList底层是怎么实现的?我就回答数组,他再问我,那它是怎么实 ...

  10. AJPFX:学习JAVA程序员两个必会的冒泡和选择排序

    * 数组排序(冒泡排序)* * 冒泡排序: 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处* * 选择排序 : 从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现 ...