Vue3.x项目全程实录 15_回到顶部组件和keep-alife使用 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，上节课咱们做了呃，下拉加载数据，并且呢，做了这个，嗯，导航栏的一个青花鸟的一个固定。这样的一个模式，那当我们数据一直往下拉的时候，用户需要回到顶部，最好给他加一个回到顶部按钮，就像我们的原因图设计一样，加一个回到顶部的一个按钮，那这个回到顶部按钮呢，可以做成一个组件，因为不管首页要用二级页面，三级页面，有可能都用到这个轨到顶部，所以呢，我们需要把它成一个通用的组件，那很多项目里边也都用，所以放在很多项目通用的组件里边。那它就是一个图标，那我们可以用图标的方式，也可以用图片的方式，我们找一个啊。看一下这里边哪个比较适合做。都挺适合的，对吧。嗯。随便挑一个吧。挑一个简单点的，你就这个吧。下载，那我们选择红色。红色的48大小的可以下载过来，然后我们改一个名。

这个啊。复制一下，然后粘贴到我们这个里边图，图片这里面。你可以用图标的方式去做啊。里边存在一个，那覆盖一下，然后呢，我们建一个组件，在这个里边新建一个返回按钮的一个组件叫back top回到顶部，Back top回到顶部，然后里边新建一个组件叫做。Back top回到顶部的组件。那这个组件我们想在哪个页面用，比如说想在后面页面用，那我们就需要在后面页面里边引入这个组件，我们把所有的引入放在一起啊，IPO引入，呃，Bak外套，当然我们这有边名，就不用这么深层的目录去设置了，然后呢，我们需要注册这个组件。找到注册组件的地方。嗯。卡。BA这个然后注册完之后，我们就可以在页面里边引用了，我们在这个位置，嗯，一定在最外层的里边引用back套引入这个组件，这样的话我们就可以在这个组件。

这个地方开始写这个组件和这个组件的样式了。那我们看一下back top这块，我们就其实就是一个div，我们用背景来完成了，就不直接在这里边用image了，所以呢，声明一个类，我们叫做呃，BA。Top这块，然后我们这加一个BAC啊，这块bak top。加这个类用背景图片，那我们加上，然后呢，呃，背景给个背景颜色吧，比如说FCFCFC加一个，然后URL指定我们用别名a ets下边的image下边的有个up.png，然后呢，让它不重复啊，我放在中间上下也是让它居中的，这样就可以了，加一个这样的一个背景图片，但是加在背景图片呢，它不一定就给我们显示啊。放在这块啊，你再往下拉一下这个，那现在虽然我们加上了这个背景图片，那我们现在没有做定位，它是不显示的，所以呢，我们现在做一个定位，比如这个我们设置一个宽度40像素，高度也给个40像素吧，这样当于我们有宽有高，对吧？然后我们做一个呃，位置po SI位置呢应该是固定，固定在哪呢？离底部下边呢，最底部已经有一个菜单了，对不对，菜单呢占50个像素，那咱们就离底部BOT Tom应该是80吧像素，然后呢，离右边咱们要的是嗯，30。

这样的话就在这个位置去放着，你看在这，然后我们再给它加一个阴影，不然的话容易跟内容重复，不像是在上面漂浮的一样，对不对，所以呢，我们再加一个。嗯，今天成高一点吧，比如说20像素。加一个这个，然后加一个背景。嗯，加阴影五像素，五像素随便写啊，然后加个颜色，比如说8888吧，对吧，加这个你看有阴影，但它不是圆形的，那我们包这个50%。

把它变成圆形的就可以了。对吧，那其他的属性如果你想加的话，那你再去呃，再自己去加就行了，其实加这些也就差不多够用了。那加上这个我们一点击回到顶部，那我们什么时候它显示，它不能是一直在这显示，在首页上就显示比较不太好看，对不对，所以呢，我们这块嗯，可以让它和我们的这个定位是一起显示，对吧？所以呢，如果我们在这儿加上受。啊，V杠瘦，然后加上A。这个属性名叫什么啊？这个。当然可以跟他叫一样的名字啊。这样的话，它变成真的时候，那显示这就显示默认是假。来，我们刷新一下。你看没有没有对不对，当我们这个显示的时候，你看它也显示，当我们这个消失的时候，上面导消失它也消失，对不对就可以了，当然我们可以换另外的一个变量，你可以自己做一个其他的变量，这样的话我们在其他的组件里边用的时候也可以用啊，当然这个我们就先这么标记吧，Table。

看着比较别扭，那我们还是换一个变量吧，换一个比如说我们叫做啊is show显示这个back后这样的一个按钮，那同样这个按钮我们需要。在这个位置Y声明一个这个变量等于ref，默认的是什么甲对吧？默认的是甲，然后我们需要在这个数据。嗯，位置这块前面加上这个点V6，它等于一个值。然后我们需要在返回组件的后边，我们也加那个加括号，不要出错。这样的话我们看一下，当我们浮动到这块时候解释对吧就可以了。然后呢，我们在点击事件的时候，点击的时候需要它回到顶部，那点击事件的这个组件上发生的，我们可以直接在这个组件上加一个事件。

A，组件加一个事件，你比如说嗯，加一个click，这样点击这个按钮的时候就可以了，但是在组件上想加事件的时候，那一定要加上na这样的话才可以啊，不然组件是不能接受这个事件的，加事件一定要加这个才可以，那我们还有一种办法，为什么呢？我们可以把事件方法写到哪去啊，写到这个里边也是可以啊，都可以，两种方式都可以，那我们就在这里边，比如说我们加回到顶部这块，我们加一个，呃，加一个事件吧。嗯，CK，如果在这里边加事件，那我们就加上bak top回到顶部这样的一个方法，然后呢，我们在这里边做一个，嗯。做一个set up这样的一个方法在里边我们直接返回，那我们必须必须得调用类的那个里边的方法才可以，所以这里边没有，那我们还得调用负类的一个方法，所以呢，做一个自定义的一个事件，那直接我在这里边返回bak top返回这个。

直接返回一个方法就行了，两步合成一步写了就不用起名起名称了，然后呢，我们这里边需要接收两个参数和什么和嗯，调用子组件，调用父组件的一个。对吧，一个钩子引用emit。调用什么副组件里边，比如说back，嗯，Be talk吧，Be talk这样的一个方法，一个事件，然后不需要传值，那么我们在副组件这块，我们就需要证明一个事件叫做b top变为一个B。Top这样的一个方法对吧，那我们需要在这个里面。找一个位置在这吧，加上一个cos TB top这样的一个方法，我们给上一个用箭头方法，我们来做这个方法一套，那这个方法里边我们就想办法处理什么。处理呃，滚动的回到顶部那个滚动的事件，这里边我们加上先看一下可不可以打印出来，打印一下111，当然我们这里边返回一定将这个B以后也给返回就可以了。

现在。我们看一下出现这个组件，我们点击一下。嗯。这边可以啊，但看不到。按幺幺就可以了，证明我们点击这个按钮是有效的，你看点击上是有效的，在这里边，那有效的我们怎么能够获取。得找到这个对象，这个对象里边我们有一个方法，什么方法呢？就是滚动到S。它里边有S。这个插件自带的一个方法，SCR滚动to到到哪里边，那你可以指定XY的坐标零，零，滚动到零，零就可以了。就加一个这个方法就行。那我们现在。直接滚动到001点击。但是它不是那种缓冲的，对不对，那我们后边可以加上一个什么，它一下就回去了，对不对，比如说加上500毫秒，在500毫秒或者300毫秒回去。啊，是吧。这是一种动画，我看。

就可以了，这就是回到顶部一个组件，那其他页面用的时候直接复制这个组件，然后呢，调用这个方法就可以了。这就是我们这个回到顶部的一个按钮的一个制作。你好。然后数据下载，现在基本上首页除了这个动播放，嗯，其他的是。差不多我们就做完了。那再做一个小的功能吧，这节个这个比较简单对不对，再做个小功能，你比如说我们现在到分类元素，我们再回来首页，你看数据是不是重新加载来到购物车，我们再回来。是不是数据又重新加载？也就是每次我们切换一个路由的时候，再回来的时候，这个组件都必须干掉，又重新创建，又重新请求服务器，所以我们可以用那个k life对吧，保存生命的那个方法。对吧。也就是不要给组件干掉路由切换的时候相当于一个缓存的一个功能。那我们就需要找到这个。

嗯。vu1.gs。我们找到这个。V3点点S。我们看一下，因为它这个呃，保持生命的在VE3里边，和VE2用的方式是不一样的，它是用插槽的方式帮我们完成的。网比较慢啊，所以呢，他需要很多条代码，如果是在我们以前的写的写的时候我们直接。应该是在APP组件里边，你看我们只要。在这个外层加个什么keep-A对吧，那基本上就可以直接就可以用了，那新的功能里边给我们加了。这样的东西。三我们找到路由。啊。在路由里边，你看V2和VU3，他给我们新加用插槽的方式呢，功能更强大了，好多东西呢，我们不用去手动的去写了，直接给我们把路径啊，或者什么都给我们缓存了，是比较方便的一个就网怎么办呢？

等待一下啊。把这个注十级。注释一下，然后我们。好。不跟了。嗯。的一律不方一次呢。那这种中庸计划？所以咱们。网速过慢的啊，然后找到下边就是一二过度三的。612过过渡到VV3的里边，代码里边就有一个告诉我们这个，呃，T怎么去处理，等一下。你看使用这个对吧，在使用这个呃，Root video的时候，KAPP我们需要通过这一系列代码，原来在以前我们就用这一条代码就可以了，现在我们得用这么多代码。

那我们就把复制粘贴固定的写法。这样的话它就能保持生命了，我们放到这来保存一下，然后我们再回到我们的项目里面，你看现在我们刷新一下，刷新肯定是请求服务器下载数据，对吧，现在你比如说点到这块新书这块。对吧，它也是重新加载数据精选这块，这个呢，都是第一次用，肯定是加载数据的，但是我现在在点分类你看，然后我再点首页回来。看看还是保持在新书这块。啊。分类回来。这样的话就没有把这个页面干掉，对吧，而是一直保持着，这样的话，我们现在每个页面都相当于有缓存。每一面都缓存，当然这个功能你最好是所有的都开发完之后再加上，所有开发完之后再加上。你现在加上也没关系，但是你要注意这个事儿对吧，有一些比如数据不变化，是因为你这块有缓存的功能造成的。因为我们项目里边所有的页面肯定是加这个，不能说离开了之后再返回，对吧，再返回，现在我再返回哪个页面返回几次它都是。

对吧，有这样缓存的搞定了。好，谢谢大家，这节课我们就讲到这里，首页基本上做完了，那下节课我们看看这个导航。