请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 快应用实现滑动刷屏

5
回复
605
查看
[复制链接]
 楼主| 2020-7-17 17:14:49 显示全部楼层 |阅读模式
本帖最后由 vivo官方技术团队 于 2020-7-20 14:48 编辑 背景 考虑到部分短视频快应用的开发者,需要实现滑动刷屏的效果,这里使用快应用的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. }
复制代码
效果展示 v消息20200717-170900.gif 测试用的在线视频地址参考https://www.jianshu.com/p/34ce7f9b469a
回复

使用道具 举报

1

主题

23

帖子

120

积分

2020-7-17 17:53:56 显示全部楼层
最近想开发一个瀑布流展示图片的快应用,楼主可以也提供一个简单demo吗?
回复

使用道具 举报

1

主题

23

帖子

120

积分

2020-7-17 17:54:57 显示全部楼层
最近想开发一个瀑布流展示图片的快应用,楼主可以也提供一个简单demo吗?

点评

可以的  详情 回复 发表于 2020-7-17 18:14
回复

使用道具 举报

 楼主| 2020-7-17 18:14:25 显示全部楼层
脚本侠 发表于 2020-7-17 17:54 最近想开发一个瀑布流展示图片的快应用,楼主可以也提供一个简单demo吗?
可以的
回复

使用道具 举报

 楼主| 2021-4-6 11:59:30 显示全部楼层
补充解决滑动视频时,视频不播放的问题,给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
回复

使用道具 举报

 楼主| 2021-4-7 18:38:44 显示全部楼层
补充【设置延时滚动】避免快速滚动时,一次滚动过多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-事件
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册