zyronon / douyin

Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile
https://dy.ttentau.top/
GNU General Public License v3.0
9.92k stars 2.73k forks source link

太牛牛了,是怎么做到这么丝滑的? #64

Closed xiguazhiPrince closed 6 months ago

xiguazhiPrince commented 6 months ago

你好,我是后端工程师,懂点前端但也不特别懂。 请教下这个项目是怎么做到如此丝滑的?!! 太丝滑了,操作起来简直就像app一样舒适 秘诀是什么?

另外为什么选择使用vue来写,不用react来写呢?如果用react还可以用到RN来转成app

zyronon commented 6 months ago

因为我18年创建的这个项目,那时我还不会vue,所以创建这个项目用来练手和学习vue

也可以用react来写,只是当时选择了vue而已。

我不确定用rn能否转成app,因为我的代码会删除dom,rn似乎是将dom转换成app原生的组件了

可以确定的是,项目目前打包成html,然后放到一个空壳的app里面,依然有不错的体验也很流畅,我曾用uniapp的5+app打包了一个app,是可以用的,只是返回键需要特殊处理

zyronon commented 6 months ago

滑动效果是自己实现的,对嵌套逻辑、触摸事件冲突做了一定的处理

无限滑动功能,不管怎么滑动,html里面都只有5个video标签。所以不会卡顿

具体可以看看我这两篇文章
200行代码实现类似Swiper.js的轮播组件:https://juejin.cn/post/7360512664317018146
实现抖音 “视频无限滑动“效果:https://juejin.cn/post/7361614921519054883

xiguazhiPrince commented 6 months ago

滑动效果是自己实现的,对嵌套逻辑、触摸事件冲突做了一定的处理

无限滑动功能,不管怎么滑动,html里面都只有5个video标签。所以不会卡顿

具体可以看看我这两篇文章 200行代码实现类似Swiper.js的轮播组件:https://juejin.cn/post/7360512664317018146 实现抖音 “视频无限滑动“效果:https://juejin.cn/post/7361614921519054883

谢谢!我去观摩下!