Weex购物车长列表横滑操作优化“编年史”

文章预览

Weex购物车诞生已经一年有余，在长列表的交互优化上花费了不少时间，本篇文章重点回顾一下长列表下横滑操作的优化历程。 前情提要 横滑交互是一个需要复杂描述的过程， 体验感觉使用文字较难描述，故本文有大量的对比视频，请放心食用。另外先在此列举下基本概念及操作的代称，便于后续描述和理解。 代称 操作 列表 一个长的，可以竖向滚动的列表 卡片 列表里一个个竖向排列的子项 横滑 手指在卡片上进行的左右滑动操作 竖滑 手指在列表上进行的上下滑动操作 横滑按钮 隐藏在卡片之下，用来删除、收藏的一些按钮 按钮展开动画 卡片从左往右移动的动画，用来展示横滑按钮 按钮关闭动画 卡片从右往左移动的动画，用来隐藏横滑按钮 回滑 按钮展示情况下，用户进行右滑操作 互斥 卡片A按钮展开时，去左滑卡片B，会自动触发卡片A的关 ………………………………