预览模式: 普通 | 列表

这种结构在电商中很常见,比如饿了吗的店铺页。我边写边参考饿站。

项目地址:
 
用到的主要的第三库:
1、bscroll(iscroll的一个改进版本),滑动框架。iscroll能实现的功能,比原生滚动控制要强得多。相应的API也更好用。
2、lodash用来实现各种快速数据运算。
 
技术要点:
1、对于iscroll的一些API的熟悉,比如如何获取滚动高度(onScroll),如何滚动到指定位置(scrollToElement)。
2、必须在dom渲染完成后,再进行iscroll定义,可使用Vue.nextTick。再比如当容器高度发生了变化 ,必须要refresh重建当前iscroll对象。当refresh时,必须要等容器动画完成后,方可进行。
3、最难点在于建立右侧位置模型,用于左导航与右列表的位置对照。也就是说,每次滚动行为,都会触发当前位置与位置表发生比对,以随时更新左侧导航状态。
4、在建立位置模型过程中,数次用到lodash,比如说:
 
// 从位置数组中,查找一个最接近当前坐标的值,然后得到“这个值对应的1、2级目录ID”
var zzz = _.findLast(this.arrPosition, function(n) {
     return n.posi<=posY;
});
this.sortA = zzz.sortA;
this.sortB = zzz.sortB;
 
如果不用工具函数,这种小算法写死人。
 
5、右侧列表是一次性载入的,可考虑做懒加载。如果列表特别长,也要考虑异步加载。
6、点击购物车的加号时,“小球落入购物车”这一效果,基本实现思路是,先算出起、终点的位置,然后用TweenMax实现动画。最后将其封装做成vue组件,以备重用。非本文重点,不做详述。
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7187