zyronon / douyin

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

小程序支持 #67

Closed pslxx closed 6 months ago

pslxx commented 6 months ago

测试了一下,滑动挺流畅的,各种动画效果也非常好

最近在写一个抖音小程序的短剧,,我目前直接用官方(uniapp) 的swiper,但是感觉不够丝滑, 不知道这个滑动的效果能不能移植到小程序(uniapp).

zyronon commented 6 months ago

不知道,没试过。理论上是不行的

因为你做无限滑动,只有两种方法:1、动态删除和增加dom,2、移动dom

我采用的是第一种,具体可以看我写的这篇文章“:实现抖音 “视频无限滑动“效果

小程序没有dom,控制元素显示或隐藏只能通过v-if。

不做无限滑动,那video多了肯定会卡

zyronon commented 6 months ago

滑动是自己写的,对事件冲突、判定、和拦截做了处理的

可以看看我这篇文章:200行代码实现类似Swiper.js的轮播组件

pslxx commented 6 months ago

我估计也是不好弄 我现在的实现方式,是一次性加载全部几十条swiper-item 但是每个里面做放了个封面图, 每个swiper-item 都监听父组件正在播放的索引对象,如果判断和自己的相同,就加载视频,否则销毁所有的数据,只保留一个封面

zyronon commented 6 months ago

那还好吧,图片几十近百个应该没啥问题的,不会卡。快百个的时候强制刷新呗😅

zyronon commented 6 months ago

另外,小程序本来就不流畅,用原生那套写也不流畅。和uniapp没啥关系,就是卡卡的,特别是滑动这种

pslxx commented 6 months ago

对,就是感觉swiper滑动的时候不跟手,不知道是帧率不够,还是动画不对,尝试了所有可设置的动画类型,都不好用

zyronon commented 6 months ago

小程序就这样,不是你的错

zyronon commented 6 months ago

或者可以试试skyline

Mandeep0001 commented 6 months ago

If you require any help?