点击选项卡或者是左右滑动切换内容的时候，去加载正确分类的数据
image.png

swiper更改的时候触发change事件。
image.png
我们子在chang事件里面打印日志，在切换swiper的时候会拿到swiper的下标。
image.png
image.png
拿到下标值后怎么去获取分类呢、？
分类是在首页里面getLabel会获取所有的分类信息
image.png
分类信息再传给tab
image.png
list组件也接收了tab的属性。
image.png
根据下标获取输出，这样就可以获取到具体切换的是某一项。
image.png
image.png

image.png
只需要获取.name就是分类的名称。
image.png

image.png
通过左右切换内容也可以获取分类
image.png

接收分类，通过分类去筛选数据

把name值传递给云函数。
image.png
image.png
默认调用的时候传第一个分类，后端开发。
image.png
切换的时候也需要调用一下
image.png

云函数接收值

image.png
这两种写法是一样的
image.png
我们可以能会接收其他的参数，所以我们用上面的这种写法
image.png

在这里进行打印
image.png
向左滑动输出了内容
image.png
再切换。数据是当前所有的数据。
image.png

做分类

在筛选数据的时候，我们不进行数据库的查询
image.png
注释掉
image.png

聚合

我们使用一种叫做聚合的方式。
image.png
获取数据库集合的聚合操作实例。
image.png
先来看下数据
image.png
点击详情—-》进入云数据库。
image.png
我们要帅选分类信息的字段。
image.png
image.png

当分类是传递过来的name值的时候。然后把获取到的数据传递给下一个流水线。
image.png
project是把指定的字段传递给下一个流水线。这里就可以指定某些字段返回到数据中，或者是某些字段不返回到数据中。
image.png
这里不返回content返回一个0或者是false。
image.png
这里传0也是表示false的意思。
image.png
最后使用一个end
image.png
我们来运行测试下，所以把这里改成前端开发。
image.png

image.png
右键，清空下我们的控制台
image.png
运行后返回的信息
image.png
新建一个json的文件
image.png

image.png
这里只是验证数据的正确性
image.png
验证下返回的数据是不是都是前端开发这个分类的
image.png
返回的所有数据都是前端开发分类的
image.png
刷新页面看下返回的数据
image.png
把接口的name值还原回来
image.png
上传部署云函数
image.png

image.png

image.png

image.png
点击职场生活，数据会闪一下。显示之前的数据，再是新数据。
image.png

处理闪一下的问题

出现闪一下的原因是这里每次会赋一个新值。新值之前它是一个旧的值。
image.png
声明这个属性是一个对象，我们对数据做一个缓存。
image.png
通过current索引来做缓存。
image.png
改成索引后，name就要这么去获取了
image.png
image.png
image.png
出现错误
image.png
这里默认改成0
image.png
还是有错误。
image.png
这里输出tab对象
image.png
默认的tab是一个空数组。
image.png
这是因为tab是从外面传递进来的
image.png
在index内传递的是一个tabList
image.png
赋值的时候同样是需要请求云函数去获取内容。也就是我们第一次去渲染的时候，还是空的数据。
image.png
tab还没有赋值，所以你去传递0 的时候，下面去获取this.tab它是一个空的数组。
image.png

监听tab值的变化

监听tab，如果新的值length为0的话，就不对它进行操作。避免我们的getList报错。
image.png

注释掉放到上面去执行，只有当我们的tab的长度不是0的时候才去执行getList方法。
image.png

这里我们传入this.activeIndex
image.png
activeIndex表示我们当前是第几项。
image.png
刷新页面，查看效果。
image.png
可以看到我们的请求数据是成功的。但是页面并没有显示我们的内容。
image.png
页面内容的显示，传递索引值。
image.png
数据有了，但是页面依然没有数据
image.png

image.png
因为我们的数组是一个引用类型。更改之后，它不认为你发生变化了。所以并不会发生一个渲染。
image.png

$set

$set可以帮助我们通知页面 ，我们的数组或者对象发生了变化。你去帮我去刷新一下。
image.png
用法，需要三个值，参数1：要去改变的数组，参数2：要修的是第几项，参数3：实际要去修改的内容
image.png
刷新页面
image.png
再去切换页面的时候 这里是空白的，也就是下一个tab的内容是空的
image.png
这就是数据的懒加载。加载过一次以后，再切换就会默认已经有了内容。
image.png
数据存到一个对象里面，需要的时候直接获取。

结束