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. C++中的显式构造函数

    有如下一个简单的复数类: class ClxComplex { public: ClxComplex(double dReal = 0.0, double dImage = 0.0) { m_dRea ...

  2. [POI2009]石子游戏Kam

    Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏 ...

  3. 51nod 1116 K进制下的大数

    你万万想不到,Long Long 就能存下的数据 #include <iostream> #include <cstdio> #include <cstdlib> ...

  4. Tian Ji -- The Horse Racing HDU - 1052

    Tian Ji -- The Horse Racing HDU - 1052 (有平局的田忌赛马,田忌赢一次得200块,输一次输掉200块,平局不得钱不输钱,要使得田忌得到最多(如果只能输就输的最少) ...

  5. 暴力(判凸四边形) FZOJ 2148 Moon Game

    题目传送门 题意:给了n个点的坐标,问能有几个凸四边形 分析:数据规模小,直接暴力枚举,每次四个点判断是否会是凹四边形,条件是有一个点在另外三个点的内部,那么问题转换成判断一个点d是否在三角形abc内 ...

  6. 211 Add and Search Word - Data structure design 添加与搜索单词 - 数据结构设计

    设计一个支持以下两个操作的数据结构:void addWord(word)bool search(word)search(word) 可以搜索文字或正则表达式字符串,字符串只包含字母 . 或 a-z . ...

  7. Laravel5中防止XSS跨站攻击的方法

    本文实例讲述了Laravel5中防止XSS跨站攻击的方法.分享给大家供大家参考,具体如下: Laravel 5本身没有这个能力来防止xss跨站攻击了,但是这它可以使用Purifier 扩展包集成 HT ...

  8. oracle数据库常用的99条查询语句

    1. select * from emp; 2. select empno, ename, job from emp; 3. select empno 编号, ename 姓名, job 工作 fro ...

  9. Android学习笔记(七) 布局基础

    一.概念 控件布局方法,就是指控制控件在Activity当中的位置.大小.颜色以及其他控件样式属性的方法.有两种方法可以控制布局: 在布局文件(xxx.xml)中完成控件的布局. 在JAVA代码中完成 ...

  10. iOS---UICollectionView详解和常用API翻译

    UICollectionView 1.必须要设置布局参数 2.注册cell 用法类似于UITableView 类.自动实现重用,必须注册初始化. 使用UICollectionView必须实现UICol ...