妙味·腾讯公开课:基于原生 H5 开发移动端 QQ 列表功能

上周六,妙味·上海 的实体公开课分享活动内容吸引了大量前端爱好者,但遗憾的是有更多前端小伙伴们不能来现场听课,他们争先恐后地在网上表达他们的巨大遗憾……为了不让小伙伴们捶胸顿足、痛哭流涕,我们再一次做了个痛快的决定:本周六晚,腾讯课堂继续开讲~

免费报名地址:https://ke.qq.com/course/223946

先看看本次远程课的分享内容:

上次我们分享的是 vue UI 组件开发,讲师现场展示了运用 vue UI 组件完成 “下拉刷新、上滑加载、图文列表” 等功能,可问题来了:利用组件开发虽然高效,却不灵活,比如你拿组件去玩,那些 “下拉刷新、上滑加载” 的功能逻辑它早封装好了,但它们内部原理是什么呢?

再有:如果我们用上次 vue 的 UI 组件库去开发本次的 QQ 列表 “左滑显示子菜单” 功能……呃,会很囧,因为该组件库并未提供 “列表左滑” 功能,万一你们公司产品经理就要做这个功能呢?你是掏出菜刀砍了这厮?还是老老实实去给组件增添新功能?可要是你不会原生、不知道咋修改肿么办咧??

本次远程课,讲师祭起原生大法,为大家详细分解其内部实现原理,最终目的:咱既要会各类组件、享受高效便捷的开发体验,更能通晓原生,从而安心扩展各项功能……正所谓:知其然,更要知其所以然。


功能描述:

1、下拉刷新: 当前状态为滚动到顶部后,继续下拉列表,释放手指后显示刷新效果,刷新完成后,显示刷新成功;

2、左划显示子菜单: 在每个对话项列表中,左划手指显示对当天对话项的隐藏功能菜单。功能菜单从左往右依次为 “置顶”、“标为未读”、“删除”

3、点击 “置顶”:功能菜单消失,将当前选中的此对话项,置于对话列表顶部;

4、点击 “标为未读”:功能菜单消失,当前对话项标记为 “未读”,右侧显示红底白字圆圈,内部内容为 “1”;

5、点击 “删除”:功能菜单消失,当前选中的对话项被删除。

课后扩展功能思考题:

  • 列表长按,弹出快捷菜单设置 “置顶 删除”;
  • 列表滑至最底顶后,列表产生 “回弹” 效果;
  • 右滑以后,展开更多功能设置;

第一次课内容:(已结束,视频已更新到 VIP 会员视频库中)

  • 第一节 - 移动端 QQ 列表布局与滑屏实现原理
  • 第二节 - 布局细节调整与 touchevent
  • 第三节 - 滑屏功能完整实现

第二次课内容:

  • 第一节 - 左右滑屏与上下滑屏的冲突
  • 第二节 - 安卓下 touchmove 的问题及解决方案
  • 第三节 - 页面功能与最终完善

技术栈:

  1. 移动端视口设置
  2. rem 适配
  3. css3
  4. DOM 操作
  5. AJAX
  6. addEventListener 事件监听
  7. preventDefault 移动端取消默认事件的必要性
  8. touchEvent
  9. 滑屏操作基本原理
  10. 上滑下滑的误触解决
  11. 安卓下大面积触摸,touchmove 误触问题解决
  12. 上滑加载-逻辑处理
  13. 下拉刷新-逻辑处理

学前基础:

  1. 移动端布局无碍
  2. 熟悉 AJAX 调用与数据处理操作
  3. DOM 操作娴熟
  4. 了解 EVENT 事件

讲师介绍:莫涛

  • 妙味课堂创始人之一,精通H5移动端开发技巧,
  • 妙味官网核心功能开发者、海量的H5、CSS3、移动端系列视频录制者;
  • 妙味最新移动端课程研发者,同时具备多年丰富的教学经历,
  • 为人谦逊,处事低调,与之接触学员均对其赞赏有加。
  • 现主导妙味新课程研发与移动端课程标准化工作,
  • 同时负责妙味实体班、远程班、公开课与最新案例研究重任。

上课时间:

第一次课:2017 年 7 月 15 日 (周六) 晚上 8 点至 10 点(已结束)
第二次课:2017 年 7 月 22 日 (周六) 晚上 8 点至 10 点

免费报名地址:https://ke.qq.com/course/223946

公开课服务:

  • 现场录制视频以便于回放,视频会上传至 VIP 会员视频库中;
  • 课件资料 PPT 均有提供,具体咨询客服;
  • 费用全免;

第一节课视频回放:

  • 首页 > 视频 > 渐入佳境 > H5移动端QQ消息列表

观看地址:http://2017.miaov.com/v_show/1796


课程咨询:

  • QQ:2852509866、2852509867、2852509868
  • TEL:010-57269690
  • 在线时间:周一至周五 9:30 - 18:00

微信扫描二维码访问更多课程:

妙味网友
请登录后留言,请登录注册