记录一下 列表

一 抽象 列表的本质与使命

抽象出本质，就是组合筛选条件，展现相应条件下的数据，而后根据这些数据参数，确保点击跳转能跳到相应位置。

二 这一版列表解决什么问题

1 拆开本来筛选条件大接口

这个 大大大接口 中，包含所有的品牌，以及每一个品牌的全部型号，加上每一个型号的容量和颜色信息。为何说这个接口大，看右侧滚动条的大小就知道了，而且在window7系统，在线json格式化工具，有可能会卡死浏览器。这已经很可怕了，更可怕的是，居然在代码中，对这个大大的数据，进行反复操做，有读取也有有增长keyvalue，可怕+1。

修改后，一个大接口变为3个灵活小接口

获取品牌接口

获取当前品牌的型号接口

获取型号的参数接口

分别是返回全部品牌、当前品牌的型号、当前型号的容量和颜色，解决以前一个性能优化的瓶颈点。

2 融合三条业务线的独立列表

如 1自营独有成色、2已验机独有特点标签、3锁定品牌的列表，又不限制转转服务

3 代码直观易懂

1. 组件没有过多的拆分
2. 摒弃mixin的使用（原使用方式，每一个组件都有引用mixin，甚至无用方法在被频繁调用）
3. 代码自己没有过多骚气操做，并加了不少注释，再配合这个文档食用，确定很容易懂的~

三 列表自己拥有的能力

1 即插即用

把我这个文件夹复制过去，就能够用了。 其实还想后续弄成npm发布的组件，甚至还想开源。

2 可以锁定渠道 品牌

如上图在官方自营的tab下面，转转服务是不容许取消勾选的

3 支持url配置 命中

如url后面加 filter=5462:2101002;5463:2101002635 ，则最开始会命中 华为 p20，支持品牌，型号。

4 侧滑筛选条件弹起时，在阻止掉后面内容滚动同时，记录以前滚动位置，加强体验

5 顶部tab切换，可缓存不一样渠道的筛选条件，以及在此条件下的请求数据

四 页面组成

五 vuex数据介绍 与 筛选核心思想

业务数据介绍，筛选的key们

实现筛选

六 逻辑点拆分

1 数据初始化

1 app.vue 中 注册list组件的局部store

注册后，列表自己的store就在全局的store的list下，以下图

2 拿到前置条件，进行初始化

前置条件指的是渠道id 和 url连接中配置的filter，组件init方法，在两种状况下会调用

第一种 mounted 周期中，这时候init中参数 会有一个keyValue。

第二种 全局store 中的 chanelId改变的时候，这时候参数没有那个keyValue。

这个keyValue做用是，命中url参数中的配置字符串。因此只有在第一次init，也就是mounted中才有用。

3 初始化方法

初始化作了如下几件事

1. 根据渠道 获取筛选信息，不一样渠道的快筛条是配置不一样的，并把筛选信息初始化
2. 根据渠道id 强制改变selectedFilterGraph，这里的强制改变，和后文的勾选是有连带协同做用的。为了实现锁定的效果，在勾选的时候，好比勾选‘官方自营’，是不容许被切换的，此时就根据 全局的chanelId来作判断，若是全局的chanelID是5464，那么会禁掉5464的筛选项的勾选，因此！！！初始化的时候，要根据chanelId来初始化selectedFilterGraph。
3. 配置的快筛条，由于不一样渠道快筛信息不同，这个比较直线逻辑
4. 清空重置一些 如瀑布流数据 当前品牌的型号 当前型号的容量参数 ，这个也很容易理解
5. 把url配置的命中参数，匹配到selectedFilterGraph中

2 触发筛选

1. 每个筛选项都是独一无二的，拥有一份key value
2. 若是已经被认定是选中了，那就走取消选中的逻辑
3. 若是没有选中，看这一组key，是否能够多选，不是的话，替换选中的value，能够多选的话，添加要选中的value
4. 选中的都会被维护在 selectedFilterGraph 中，见下图

3 蒙层弹起后，禁止后面滚动，并能固定在，蒙层弹起前一刻的位置

如下两个图说明原理

4 缓存

1. sotre.list 存的是什么？

2. 有全部的用来筛选的原始数据，有选中的那个graph对象，也有当前筛选状态下的瀑布流数据。 3. 那么，其实能够理解，我提供了一个列表架子，内部的数据，在这个store.list中，只要换了这个list，这个架子就会展示不一样的数据，而且功能无缺。 4. 配合全局的store，实现缓存