uniapp仿抖音视频滑动效果
插件分别用swiper实现(多端)和css3动画实现(只支持app,强烈推荐),可自行切换。
插件在uni-app编译模式下编写。
默认为weex编译模式,在 manifest.json 的源码视图里配置是切换模式, manifest.json -> app-plus -> nvueCompiler 切换编译模式。
小广告: 您可能需要一款播放器
ccs3:上下切换视频,左右查看看详情,weex-bindingx优化动画,无限加载,点击暂停,仅支持安卓和ios
swpier: 上下切换视频,多端兼容
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
typeX | Boolean | false | 是否开启左右滑动 |
playCount | Number | 2 | 剩余多少视频加载视频列表 |
startDistance | Number | 5 | 开启左右滑动时有效,判断左右上下拖动的启动距离 px |
minTime | Number | 300 | 判断为快速滑动的时间,该时间内无视回弹 ms |
backDistance | Number | 200 | 上下滑动的回弹距离 px |
1.视频滑动效果
2.视频滑动后自动播放和暂停功能
3.点击暂停与播放
4.视频拖动效果
5.解决iostouch无效
6.点赞功能
1.更改uni-app编译模式下使用swiper组件实现。
1.新增css3实现效果
2.css3支持点击播放和暂停功能
3.移除swiper中点击视频播放和暂停事件,尽量减少swiper中的事件
4.index索引首视频设置为自动播放
5.新增进度条
6.修复h5多个视频播放问题
1.css3: 引入BindingX优化拖动性能
2.修复进度条
3.优化css3样式
4.css3新增无限加载
1.swiper:修复下滑不灵敏的bug
2.css3:新增参数说明,新增左右滑动查看详情
3.video组件新增上下边框阴影