step7解决（3）中刷新在两个tab中都添加元素的问题
- （3）中的情况是无论在动态tab下拉刷新还是在前端tab下拉刷新同时会增加dom元素
- 主要是因为这一句话，这里的this是指向整个template的根目录，这也正好可以解释片段实例为什么获取不到元素了
-
main.vue
Paste_Image.png
- 那就必须是添加到当前指令下的.card-container,所以要获取到当前指令元素，可以在自定义指令中获得并传参
- PullToRefresh.js
Paste_Image.png
Paste_Image.png
- 现在可以main.vue 中的函数中获取这个参数，利用它获取当前元素的.card-container
Paste_Image.png
Paste_Image.png
step8不再操作dom只关心数据
- vue是为数据而生的，不该过多的操作dom,而之前的所有刷新都是append了一次元素
- 为了模拟有真实是的数据时的情况，把将定义两个数组将分别对应两个tab里面的数组task1,task2，并在每次下拉时push进去，这时候我们就不在需要操作dom元素了，只需要关心data的变化
- 为了让存放在不同的数组中在自定义指令的元素上加入了这些属性
Paste_Image.png
- 然后在pullToRefresh.js中将它设置到自定义属性中，当然要记得在params中传入特性，（这里我总感觉我这方法有点麻烦，如果在指令中传参我还没有明确，希望有知道的大神指点一二）
Paste_Image.png
- 每次下拉函数都会push一个数组
Paste_Image.png
- html中用v-for输出数组
Paste_Image.png
- 基本的home.vue已经全部完成了
Paste_Image.png
- 当我很开心的以为结束了今天的任务的时候，我切换一下底部菜单，然后再回到home tab时，整个人都不好了，刚刚下拉的数据全部没了，回到刚开始的页面
Paste_Image.png
- 我本想着要自定义方法来存储，可是参考资料里面是并不用这么麻烦的，寻寻觅觅了很久很久，终于遇到了神奇的它---keep-alive
-
先来了解一下动态组件
Paste_Image.png
- 当用户关闭component时，将该component卸载，再次打开时重新加载。
Paste_Image.png
-
这个项目里在router-view标签中加上keep-live就可以缓存组件了
- 扩展：根据官方的这个案例，通过:is和keep-alive可以实现随意切换是否缓存这个组件
-
现在无论怎么点tab键都能保留下拉刷新的那几个内容了
https://github.com/sally2015/vue-project
- 同步最新代码，如果你觉得有帮助，不求打赏只求github给个小星星，拜托拜托
网友评论