微信小程序模仿抖音，全屏播放且有流畅的动画

有上翻的动画，有商品展示，有分享，以及跳到视频库。之前网上找了很多，说swiper不能套video,现在已经可以了，第二种是把封面平铺下来，滚动的是封面那种，效果不好

首先用一个cover-view来控制上下滚空，监听touch事件,让swiper的index+1或者-1

swiper包裹这video,swiper不能自动滚动，但是必须要设置衔接的属性。

js里面onshow的那个地方是我们点击tabbar的时候不需要再次调接口，做的处理，如果不是tabbar,可以直接再onload里面调后端数据

注意的是，在开发中，只要不是本地的视频，掉了接口，然后ios的前两个视频就是黑屏，后来加上了custom-cache="{{false}}">就解决了

注意的另一个兼容的是，只有cover-view才能覆盖再原生video之上，像轮播购买记录的那个地方，cover-view不能包swiper,所有有的手机是被视频遮住的

如果不妨到tabbar里的话，就是全屏播放了，头部自定义，然后左右两边也没有黑色没撑满了

实现功能参考： 微信小程序自定义组件实现单指拖动、双指缩放效果 有修改。

给加拖动事件，我们需要知道它什么时候被点击、被拖拽和拖拽结束。

通过修改imageView的margin-left和margin-top来改变的位置以实现的单指移动效果和所有 *** 作结束松手后的回d效果。

通过修改imageView的宽和高以实现放大缩小的效果。且需要同时修改其margin-left和margin-top使能以两手指的中间点为原点缩放。

Talk is cheap, show you the code

接下来是交互事件

运行条件

HBuilder X 222

安装后，从插件市场导入，即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app)，可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式，在 manifestjson 的源码视图里配置是切换模式， manifestjson -> app-plus -> nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差，不建议导入过多视频。

项目效果

h5在线地址

可能是以下原因导致的：

1视频文件损坏或格式不支持，可以尝试使用其他视频文件或转换为支持的格式。

2网络问题，视频文件可能无法正常加载，可以检查网络连接并重试。

3小程序版本过低，可能不支持某些功能，可以更新小程序版本并重试。

4代码逻辑问题，可以检查代码是否正确实现了video组件的使用。

如果以上方法都无法解决问题，可以尝试联系小程序开发者或技术支持寻求帮助。

众所周知，audio或video标签有一个自动播放的属性，即autoplay，但是在真实项目中，我们会发现给音视频标签添加了autoplay属性后，音视频并不会自动播放，依然需要手动点击，这是因为谷歌等主流内核都禁用了autoplay属性，如果我们希望自动播放，还需要另辟蹊径。写完小项目后，笔者将解决办法粘贴 出来，供个人以及部分笔者后期参考（本文只提供微信平台提供的解决办法）。

官网： >

以上就是关于微信小程序模仿抖音，全屏播放且有流畅的动画全部的内容，包括:微信小程序模仿抖音，全屏播放且有流畅的动画、微信小程序 单指平移 双指缩放图片功能、仿抖音上下滑动播放视频（兼容安卓，ios，小程序，h5）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！