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

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

3
回复
289
查看
[复制链接]
 楼主| 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

主题

19

帖子

100

积分

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

使用道具 举报

1

主题

19

帖子

100

积分

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

点评

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

使用道具 举报

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

可以的
回复

使用道具 举报

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