微信小程序 video组件----真机测试position:fixed无效 且有黑底
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:真机预览时上传组件的坑: 当在真机里面使用上传组件,当进入选择相片或者拍照的时候,小程序会进入后台,调用APP onHide()方法,选择完返回小程序是会调用App Onshow()方法,然后调用 ...
- 微信小程序 - video组件poster无效 / 视频播放列表
在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...
- 如何使用微信小程序video组件播放视频
相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...
- 微信小程序video组件出现无法播放或卡顿
微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.
- 微信小程序 video组件 不随页面滚动
1.页面初始化(滚动前)时,video所在位置 2.页面滚动后,video视频组件所在位置 看了别人家的小程序并不会出现这种状况.最后检查发现,是页面包裹层设置了 height:100% 导致的 顺便 ...
- 第七篇、微信小程序-video组件
主要属性: 效果图: ml: <View>1.播放网络视频</View> <view > <video style="width: 100%;hei ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 小程序 video 组件同层渲染公测
小程序 video 组件同层渲染公测 各位开发者: 大家好. 小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制,为了方便开发者更好地使用原生组件进行开发,我们对小程序原生组件引入了 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
随机推荐
- Ubuntu 12.04的gnome classic panel添加程序快捷键(转载)
How to add applets to the Gnome classic panel in Ubuntu 12.04 转自:http://www.borfast.com/blog/how-add ...
- PCB Web版SI9000阻抗计算器
在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法 ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现. 一.Web版SI9000阻抗计算器 ...
- P2479 [SDOI2010]捉迷藏
传送门 KDtree是个吼东西啊-- 枚举每一个点,然后求出离他距离最远和最近的点的距离,更新答案 然而为什么感觉KDtree只是因为剪枝才能跑得动呢-- //minamoto #include< ...
- 洛谷P3569 [POI2014]KAR-Cards(线段树)
传送门 蠢了…… 我们用线段树,记$w0$为该区间最左端取小值时,最右端最小能取大还是小还是无解,$w1$表示最左端取大值时,最右端最小能取大还是小还是无解 然后只要把交换看做修改就好了 这么说可能很 ...
- Spring @requestBody
页面提交请求参数有两种,一种是form格式,一种是json格式 jQuery的$.post方法虽然也可以传递json格式数据,但实际上是用的form格式提交,jquery会帮你把json转成form格 ...
- django templates模板
Django templates模板 HTML代码可以被直接硬编码在views视图代码中,虽然这样很容易看出视图是怎么工作的,但直接将HTML硬编码到视图里却并不是一个好主意. 让我们来看一下为什么: ...
- 构造 BestCoder Round #52 (div.2) 1001 Victor and Machine
题目传送门 题意:有中文版的 分析:首先要知道机器关闭后,w是清零的.所以一次(x + y)的循环弹出的小球个数是固定的,为x / w + 1,那么在边界时讨论一下就行了 收获:这种题目不难,理解清楚 ...
- 贪心 UVALive 6832 Bit String Reordering
题目传送门 /* 贪心:按照0或1开头,若不符合,选择后面最近的进行交换.然后选取最少的交换次数 */ #include <cstdio> #include <algorithm&g ...
- jmeter(三)参数传递
[一]参数化 录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户来登录系统. 这个时候就需要对用户名和密码进行参数化,使每个虚拟用户都使用不 ...
- Angular广播/消息通知的接收与发送
一.在接收页:添加引用: private eventManager: JhiEventManager: 接收通知的方法: // 接收通知(新建.编辑.删除页发送过来的通知) // upmsMenuLi ...