小程序类似抖音视频整屏切换

更新

现在已经更新了github地址和效果gif,可在文章最后查看。如果我的代码对你有用,请帮我随手star一下。

需求

最近在项目中需要加一个功能,在小程序中将已有的短视频功能,按照抖音的方式来浏览,整屏,可上下滑动切换视频,并添加上滑下滑的动画。

思路

1.在video标签上添加时间监听。 2.如果1无法成功,就在video上面罩一层 cover-view,在cover-view上添加时间监听。 3.如果上面两种方法都不行,用小程序的onPageScroll页面处理函数来监听页面的滚动。 4.上述三种方法都不行的话,用canvas在video上面罩一层,监听滚动事件。

尝试

现在video标签上添加了触摸事件的监听,但是无法成功监听到触摸事件。 因为video 是原生组件,层级较高,所以尝试在上面罩一层cover-view,并监听滚动事件,但是同样无法监听。

前面两种方法不行,我就采用了onPageScroll来监听页面是否发生滚动。这个方法会拿到当前页面在垂直方向已滚动的距离。scrollindex用来控制滚动,totalNum是滚动的总数,部分代码如下

在ios上可以满足需求,能上下滚动,也能加上动画,但是在安卓上却不能动,尝试着在页面json文件中配置滚动相关,但都没办法,所以这个方法也不行了。

最后只有canvas这一个办法了,在video组件上面定位一个canvas,在上面添加时间监听,这是发现成功了,可以在控制台看到打印出来的监听 console。

实现

wxml:下面是wxml代码,主要思路就是让video宽高等于屏幕,点赞评论分享等功能,用cover-view定位到视频上方,在将canvas定位到video上面滚动时滚动的是封面图案,video标签只有一个,滚动更改video的src。

wxss:都是一些定位相关的样式没有特殊的样式就不贴图了。不过做的时候这里有个坑,产品希望添加无限的向下滑动视频,可以无限加载,所以最开始我才用的是animation动画,对每一屏根据手指向上或者向下添加动画,这样做的话就无法做到,后来发现可以使用小程序的api,wx.createAnimation()在js中实现。

js:onload的时候this.animation = wx.createAnimation();用于切换时创建动画。

需要监听的滚动事件

js主要做的是判断滚动方向,给wxml通过微信提供的animation方法来动态添加动画,这样就可以实现无限加载的需求了。scrollTop的作用是用来调整video标签位置,因为现在滚动的时候添加滚动的事视频的封面图不是视频本身,需要隐藏视频,假如用wx:if;哎控制的话,会导致视频隐藏在展现之后无法监听之前添加的事件。

效果

在真机上可以生效,在手机上录了视频不知道怎么传上来,转gif也没找到在mac怎么转。。。

更新上来了gif,不过gif感觉稍微有点卡顿,没手机上流畅。手机ios也是比安卓的流畅很多。但是都比这个图片流畅。。。而且现在视频地址都挂了,所以一直转圈缓冲,没办法播放只剩下这个图片了,正常缓冲结束后是会播放的。

最后

弄了好久弄出来的,真机和模拟器的效果差异很大,最好在真机测试。目前也不知道有没有更好的办法,菜鸟前端一个~

补充

github地址:github.com/xuguoyii/wx…

转载于:https://juejin.im/post/5bea9075f265da611f073ce3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Coding For Fun 32小时:充满创造、激情、团结的编程马拉松

摘要:Coding for Fun大赛是2012中国软件开发者大会(SDCC)的重要环节。由六名黑马学员组成的“天翼二队”,经过32小时的“血拼”,凭大赛作品“语音控”,获得了本次大赛的“最佳设计奖”。本文是该队队员的参…

centos6.8安装oracle12C 详细步骤讲解

2019独角兽企业重金招聘Python工程师标准>>> centos6.8安装oracle12C 详细步骤讲解 安装前环境配置 1 root身份安装依赖包 [rootdlp ~]# yum -y install binutils compat-libcap1 compat-libstdc-33 compat-libstdc-33.i686 gcc gcc-c glibc glibc.i686 glibc-deve…

解决 springboot 项目:找不到或无法加载主类

Spring Boot下无法加载主类 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 我什么也没有改,启动服务报错如题:找不到或无法加载主类 解决:什么也不…

管理好你的愿望,人生将另一个样

别让欲望控制了你欲望是人的本性。人生在世,谁都会有欲望。物欲、食欲、情欲、发财欲、求知欲……欲望是消防队也无法扑灭的火。作为人,我们不能消除欲望,也不能让欲望漫无边际地增长,所以,我们应该把握好欲望的尺度&a…

25 模块和包

今日内容 import from xxx import xxxx 金庸 1. 导入模块的执行的步骤 2. 自定义模块 3. 自定义包(难点) 一个表达式 -> 一条语句 -> 语句块 -> 函数 -> 类 -> 模块 -> 包 -> 项目 包就是我们的文件夹, 包内可以写很…

【许晓笛】 EOS 智能合约案例解析(2)

详解 EOS 智能合约的 cpp 文件 之前的文章介绍了 eosio.token 智能合约的 hpp 文件,这次向大家介绍 eosio.token.cpp 文件,cpp 文件即 C 代码文件,智能合约所有的业务逻辑内容都是在 cpp 文件中实现的。 eosio.token.cpp 文件地址&#xff1a…

java 中 transient关键字

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 java语言的关键字,变量修饰符,如果用transient声明一个实例变量,当对象存储时,它的值不需…

java中int转成String位数不足前面补零

java中int转成String位数不足前面补零 转载自:http://ych0108.iteye.com/blog/2174134java中int转String位数不够前面补零 String.format("%010d", 25); //25为int型 10代表前面要补的字符 10代表字符串长度 d表示参数为整数类型 今天想将int 转String 位…

Oops! the requested resource is not found!

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 情况一:调用 dubbo 服务失败,报错如题:Oops! the requested resource is not found! 原因很简单&am…

django URL路由基础

URL是Web服务的入口,用户通过浏览器发送过来的任何请求,都是发送到一个指定的URL地址,然后被响应。 在Django项目中编写路由,就是向外暴露我们接收哪些URL的请求,除此之外的任何URL都不被处理,也没有返回。…

Linux在超级计算机领域一统天下

摘要:在世界超级计算机排行榜500强榜单中,基于Linux的超级计算机占据了462个席位,比率高达92%。基于Windows的超级计算机仅有2个席位,份额为0.4%。中国基于Windows的超级计算机Magic Cube排名94位,澳大利亚基于Windows…

Qtum量子链漏洞赏金计划正式开启

本次Qtum量子链赏金计划为了更好的借助社区的力量参与到QTUM主网及周边应用的开发建设中,让QTUM持续地保持安全、高效的运行,同时能满足更多用户的需求。Bug分级与奖励体系1、如果已经有类似的Issue或者Qtum团队已经知道并在解决该问题的情况将不适用于该…

.SpelEvaluationException: EL1008E: Property or field ‘cache_department_list_Tree‘ cannot be found

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 报错如题: .SpelEvaluationException: EL1008E: Property or field cache_department_list_Tree cannot be found on object…

修过的一个android framework原生系统代码bug

“坑”描述: 在对我们自己研发的一款android终端进行camera拍照压力测试时,发现当拍照张数达到几万张时,查看内存占用情况,发现内存泄露。 填“坑”: frameworks/base/core/jni/android/graphics/YuvToJpegEncoder.…

Koa项目搭建过程详细记录

2019独角兽企业重金招聘Python工程师标准>>> Java中的Spring MVC加MyBatis基本上已成为Java Web的标配。Node JS上对应的有Koa、Express、Mongoose、Sequelize等。Koa一定程度上可以说是Express的升级版。许多Node JS项目已开始使用非关系型数据库(MongoDB)。Sequel…

商业项目中代码质量是否重要?

这是一篇比较老的 文章,但是文中的这些问题在现在仍然普遍存在。代码质量的高低与商业产品的优劣是否有直接的影响?开发者Frank Sommers在文中给出了他的看法。文章内容如下。在大多数商业项目中,代码质量并不被看重,因为大部分情…

Class is not a root resource. It, or one of its interfaces must be annotated with @Path:

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 报错如题: Class is not a root resource. It, or one of its interfaces must be annotated with Path:XXXX 这是一个dub…

Equation漏洞混淆利用分析总结(下)

样本三 如下所示在该样本中,使用了Ole10Native的流,因此没有equative head,默认读取红框中的4位长度。之后的metf head为01. 可以看到metf head的长度为01时,直接进入到if判断中(该if中的函数实际是一个异常处理函数,但…

闲扯工程师的版本管理概念

如果你所在的公司还在通过qq给客户发sdk升级包等,你可以考虑换一家公司了。

resource fork, Finder information, or similar detr

1.关闭当前项目和Xcode 2.打开终端或者iterm cd ~/Library/Developer/Xcode/DerivedData/ 3. xattr -rc . 4.重新打开项目 5.如果不行那你就再试试其他的办法吧,我就是这样弄好的 如果有需要装系统的话可以看一下我自己封装的系统,原装系统无精简&#x…