网站建设问答小编今天给大家整合了一篇有关《小程序类似抖音视频整屏切换》的文章，关于小程序类似抖音视频整屏切换的详细内容欢迎往下阅读，下面就由小编一一给大家介绍，一起去了解吧！

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

　　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怎么转。。。

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

  目前，《小程序类似抖音视频整屏切换》页面仍在完善中，后续将为您提供丰富、全面的关于《小程序类似抖音视频整屏切换》的最佳回答，小编将持续从百度问答、百度百科、搜狗问答、搜狗百科、微博问答、头条百科、悟空问答、知乎热门问答以及部分合作站点渠道收集和补充完善信息。

  深圳蚂蚁网络网站建设公司提供，系统定制，微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。版权声明：如发现内容存在版权问题，烦请提供相关信息发邮件至3310459304@qq.com，我们将及时沟通与处理。本站内容均来源于网络，涉及言论、版权与本站无关。