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. hdu4608 I-number

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4608 题意:给定一个数X,注意X是个大数,X的长度不超过1e5. 让你求出一个Y,满足三个条件,Y&g ...

  2. PCB 铜皮(Surface)折线多边形扩大缩小实现(第一节)

    继续铜皮多边形的相关的算法, 如何用代码实现多边形的扩大与缩小,这部份内容准备分为四节内容来讲解, 第一节,折线多边形的扩大缩小(不包含圆弧)   此篇讲第一节 第二节,带圆弧的多边形的扩大缩小 第三 ...

  3. eclipse本地怎么和git相同

    1.打开Eclipse后,在左侧的项目窗口空白处右键,选择“Import...”2.打开Import窗口后,选择“Git”->"Projects from Git",点击“N ...

  4. bzoj 1880: [Sdoi2009]Elaxia的路线【spfa+拓扑排序】

    有趣啊 先spfa分别求出以s1,t1,s2,t2为起点的最短路,然后把在s1-->t1或者s2-->t2最短路上的边重新建有向图,跑拓扑最长路即可 #include<iostrea ...

  5. ionic2 如何引入第三方cordova插件

    例如:cordova-plugin-wechat 这个插件可以做微信登录,分享支付等 首先第一步:ionic plugin add cordova-plugin-wechat --variable w ...

  6. Keras 文档阅读笔记(不定期更新)

    目录 Keras 文档阅读笔记(不定期更新) 模型 Sequential 模型方法 Model 类(函数式 API) 方法 层 关于 Keras 网络层 核心层 卷积层 池化层 循环层 融合层 高级激 ...

  7. Taro 采坑日常

    组件事件传参只能在类作用域下的确切引用(this.handleXX || this.props.handleXX),或使用 bind. 组件中点击事件如下 // 组件 <AtListItem k ...

  8. c语言程序设计案例教程(第2版)笔记(三)—变量、结构体

    零散知识点: 变量        :C语言中,每个变量必须先定义后引用.所谓变量存在是指系统为这个变量分配一块存储空间,此时对变量的操作,就是对变量所对应的存储空间中存放的数据进行操作.人们将变量占据 ...

  9. selenium通过autoit实现上传和下载

    autoit安装目录如下: AutoIt Windows Info   用于帮助我们识Windows控件信息. Compile Script to.exe 用于将AutoIt生成 exe 执行文件. ...

  10. C# 代码笔记_tuple元组

    tuple元组: 赋值 List<Tuple<string, int>> cc = new List<Tuple<string, int>>() { n ...