快应用实现滑动刷屏

vivo官方技术团队

背景 考虑到部分短视频快应用的开发者，需要实现滑动刷屏的效果，这里使用快应用的list组件，简单实现一个仿抖音的滑动刷屏demo，可供感兴趣的同学参考。

1. <template>
2. <tabs class="wrap" index='1'>
3. <tab-bar class="title">
4. <text class="nav">关注</text>
5. <text class="nav">推荐</text>
6. </tab-bar>
7. <tab-content>
8. <div class="video-item"><text>关注</text></div>
9. <list @scroll="scroll" id="list">
10. <block for="list">
11. <list-item @appear="appear($idx)" class="video-item" type="video">
12. <video autoplay="true" src="{{$item.src}}" controls="false"></video>
13. <div class="mask" id="mask{{$idx}}">
14. <text class="name">{{$item.name}}</text>
15. <text class="desc">{{$item.desc}}</text>
16. </div>
17. </list-item>
18. </block>
19. </list>
20. </tab-content>
21. </tabs>
22. </template>

复制代码

主要思路及关键代码 1.list-item的appear事件，判断下一个list-item的出现时机，定义变量currentIndex来存放当前出现的list-item的index；

1. appear(index) {
2. this.currentIndex = index
3. }

复制代码

2.使用list的scroll事件，判断用户滑动屏幕时的状态。返回的参数stateValue有下列三种状态：

• 0： list 停止滑动
• 1： list 正在通过用户的手势滑动
• 2： list 正在滑动，用户已松手

3.当stateValue为2或0时，获取list元素并调用scrollTo方法，让当前list-item直接展示到当前页

1. scroll(e) {
2. if (e.scrollState === 2 || e.scrollState === 0) {
3. this.$element('list').scrollTo({ index: this.currentIndex , smooth: true })
4. }
5. }

复制代码

效果展示 测试用的在线视频地址参考：https://www.jianshu.com/p/34ce7f9b469a

脚本侠

最近想开发一个瀑布流展示图片的快应用，楼主可以也提供一个简单demo吗？

脚本侠

最近想开发一个瀑布流展示图片的快应用，楼主可以也提供一个简单demo吗？

vivo官方技术团队

脚本侠 发表于 2020-7-17 17:54 最近想开发一个瀑布流展示图片的快应用，楼主可以也提供一个简单demo吗？

可以的

vivo官方技术团队

补充解决滑动视频时，视频不播放的问题，给video加上id，调用start方法播放视频：

1. <video id="video-{{$idx}}" autoplay="true" src="{{$item.src}}" controls="false"></video>

复制代码

1. appear(index) {
2. this.currentIndex = index
3. this.$element(`video-${index}`).start()
4. }

复制代码

参考快应用官方文档-video

vivo官方技术团队

补充【设置延时滚动】避免快速滚动时，一次滚动过多item 1.定义一个变量控制延时：

1. data:{
2. timeFlag:false
3. }

复制代码

2.在视频【连接成功】和【播放失败】时，设置延时滚动：

1. timeoutHandler() {
2. this.timeFlag = false
3. setTimeout(() => {
4. this.timeFlag = true
5. }, 1000);
6. }

复制代码

3.在appear事件里判断是否要滚动到下一个video，若timeFlag为true，则改变当前index为next index：

1. appear(index) {
2. if (this.timeOut) {
3. this.currentIndex = index this.$element(`video-${index}`).start()
4. }
5. }

复制代码

参考 快应用官方文档-video-事件

daiwei

视频向下滑动一半然后又向上滑，按理说应该还是原视频，这个bug有啥思路不