西安推荐企业网站制作平台,wordpress 文章地址,空间登录,湛江大型网站模板建设更新 现在已经更新了github地址和效果gif#xff0c;可在文章最后查看。如果我的代码对你有用#xff0c;请帮我随手star一下。 需求 最近在项目中需要加一个功能#xff0c;在小程序中将已有的短视频功能#xff0c;按照抖音的方式来浏览#xff0c;整屏#xff0c;可上…更新 现在已经更新了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动画对每一屏根据手指向上或者向下添加动画这样做的话就无法做到后来发现可以使用小程序的apiwx.createAnimation()在js中实现。 jsonload的时候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
