快应用实现滑动刷屏
本帖最后由 vivo官方技术团队 于 2020-7-20 14:48 编辑背景
考虑到部分短视频快应用的开发者，需要实现滑动刷屏的效果，这里使用快应用的list组件，简单实现一个仿抖音的滑动刷屏demo，可供感兴趣的同学参考。
<template>
<tabs class="wrap" index='1'>
<tab-bar class="title">
<text class="nav">关注</text>
<text class="nav">推荐</text>
</tab-bar>
<tab-content>
<div class="video-item"><text>关注</text></div>
<list @scroll="scroll" id="list">
<block for="list">
<list-item @appear="appear($idx)" class="video-item" type="video">
<video autoplay="true" src="{{$item.src}}" controls="false"></video>
<div class="mask" id="mask{{$idx}}">
<text class="name">{{$item.name}}</text>
<text class="desc">{{$item.desc}}</text>
</div>
</list-item>
</block>
</list>
</tab-content>
</tabs>
</template>
主要思路及关键代码
1.list-item的appear事件，判断下一个list-item的出现时机，定义变量currentIndex来存放当前出现的list-item的index；
appear(index) {
this.currentIndex = index
}
2.使用list的scroll事件，判断用户滑动屏幕时的状态。返回的参数stateValue有下列三种状态：
[*]0： list 停止滑动
[*]1： list 正在通过用户的手势滑动
[*]2： list 正在滑动，用户已松手
3.当stateValue为2或0时，获取list元素并调用scrollTo方法，让当前list-item直接展示到当前页
scroll(e) {
if (e.scrollState === 2 || e.scrollState === 0) {
this.$element('list').scrollTo({ index: this.currentIndex , smooth: true })
}
}
效果展示
测试用的在线视频地址参考：https://www.jianshu.com/p/34ce7f9b469a
最近想开发一个瀑布流展示图片的快应用，楼主可以也提供一个简单demo吗？ 最近想开发一个瀑布流展示图片的快应用，楼主可以也提供一个简单demo吗？ 脚本侠 发表于 2020-7-17 17:54
最近想开发一个瀑布流展示图片的快应用，楼主可以也提供一个简单demo吗？
可以的 补充解决滑动视频时，视频不播放的问题，给video加上id，调用start方法播放视频：
<video id="video-{{$idx}}" autoplay="true" src="{{$item.src}}" controls="false"></video>
appear(index) {
this.currentIndex = index
this.$element(`video-${index}`).start()
}
参考快应用官方文档-video 补充【设置延时滚动】避免快速滚动时，一次滚动过多item
1.定义一个变量控制延时：
data:{
timeFlag:false
}
2.在视频【连接成功】和【播放失败】时，设置延时滚动：
timeoutHandler() {
this.timeFlag = false
setTimeout(() => {
this.timeFlag= true
}, 1000);
}
3.在appear事件里判断是否要滚动到下一个video，若timeFlag为true，则改变当前index为next index：
appear(index) {
if (this.timeOut) {
this.currentIndex = index this.$element(`video-${index}`).start()
}
}
参考 快应用官方文档-video-事件 视频向下滑动一半然后又向上滑，按理说应该还是原视频，这个bug有啥思路不
页:
[1]