Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[第二期]无限滚动加载的通用组件 #8

Open
leecade opened this issue Jun 1, 2018 · 1 comment
Open

[第二期]无限滚动加载的通用组件 #8

leecade opened this issue Jun 1, 2018 · 1 comment
Labels
side-project side project

Comments

@leecade
Copy link
Contributor

leecade commented Jun 1, 2018

无限滚动组件

基本要求

  1. 要求实现三种列表样式,详见设计图部分
  2. 可无限加载新内容,页面不会卡死

后端要求

  1. 实现数据分页,数据 mock 一份即可

  2. 可自己搭建服务,自选框架,比如 koa2,不强制使用 fe

  3. 有 api 和静态资源分类的概念

  4. 列表数据格式可参考

    [{	
    	id: "hahahahahha",
    	index: 0,
    	title: "我是标题,要短",
    	desc: "我是描述,我很长。",
    	// pic: "http://xxx.xx.x/xxxxx.avi",
    	pic: "http://xxx.xx.x/xxxxx.png",
    	date: 
    },{
    	// ...
    }]
    

前端要求

  1. 实现滚动加载机制,思考 scroll 事件 与 intersection observer 两种实现方式的区别,和各自优缺点,择一进行实现
  2. 重点关注页面滚动性能,页面不卡顿,保持滚动帧率 60fps
  3. 理解优化方案
  4. 适配多移动终端

设计图

  1. 文字列表
    list1

  2. 普通的图文列表
    list2

  3. css3 动画、特效、蒙层、变换 的列表
    list3

技能

  1. 原生 js 编写
  2. 前端调试技巧
  3. 基于 vscode 的 node 调试工具
  4. 自我学习,知识检索能力
@leecade leecade added the side-project side project label Jun 1, 2018
@catee catee changed the title [第二期] [第二期]无限滚动加载的通用组件 Jun 1, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
side-project side project
Projects
None yet
Development

No branches or pull requests

1 participant