霍常亮淘宝客app开发系列视频课程第39节：实现内容滚动切换以及同步原创

Hello，大家好，我是霍尚亮，非常高兴继续和大家一起来学习关于使用UN来开发淘宝APP的课程。那么我们在上一节课呢，咱们已经简单的实现了，包括顶部的导航，包括选项卡，包括下面的内容，包括单图和多图，那么这节课呢，我们是想让这里点击。能够和下面进行一个联动，对吧？首先呢，你需要和上面有道，上面有多少个标签，你下面就有多少个印，对不对，那么我们可以看一下，这个是一个类似的啊，参考的一个形式，对吧？上面有多种对不对，有多个算是叫做类目啊，叫做权限卡，但它长得可能跟咱们这个不太一样，但是核心的思路是类似的，对吧，那么我们想要实现的也是。这样的一个类似的一个效果，那么我们应该如何去做呢？首先呢，咱们需要在。标签中啊，首先需要在组件中新建一个组件，比如说我们叫list。

下面勾选创建同名目录。然后我们点击这里的创建，那么我们现在想要的就是把这边的。这些给它单独的放在一个组件里边，对吧，那么我们剪切一下。把它删除掉，直接粘贴到这边，然后我们点击保存，那么这条就变成空的了。那么我们这边也保存一下，那么这头就变成空的了，因为我们已经把它给删除掉了，之后呢，我们插入咱们刚刚的组件。这个时候咱们再来保存。现在又已经回来了，对不对，因为我们叫说list，然后list呢，在这边把它给调用了。

但是这个时候我们还是没有达到我们想要的能够滑动的。效果，而滑动的效果呢，在我们整个UNIAPP中，我们有一个组件和它类似，就是这个，这个呢是一个晃动的组件啊，或者叫做幻灯片啊，可幻动时刻都可以，那么我们使用这个组件就可以间接的实现我们的效果，但是说肯定还是需要一定的调整更改，对吧，那么我们在这边。新建一个，这个叫什么。Sweeper对吧，那么我们在这边也建一个。然后呢，呃，咱们暂时只用一个做演示，把下面的这个删除掉。对吧，因为我们现在的用不了这么多啊，咱们把它删除掉之后呢，上面的这些类咱们留着也没用啊，但是呢，也可以把它删除掉，这些就是因为这是幻灯片嘛，它出机幻灯片也有一个自动播放啊，停留时间啊之类的啊，这些呢，咱们用不上，可以把它也删除掉，因为我们是希望手动去控制的，对吧，你不能说人家用户看着好好的，你来自动播放，他还没看完呢，你自动从天猫跳到摸头了，对吧？这样的话用户体验效果肯定会比较差了，所以说我们不需要让它自动播放之类的。

那么在这里呢，这个就是里边的这个内容啊，我们也不用咱们把之前的。这个东西就是咱们的这个轮播，把它放进来，然后再保存。OK，那现在你所看到的呢，就是它有了一个拦截对吧？啊，那么我们这个高度显然是不对的，咱们把高度给它设置一个100%，这里呢一个class。

然后起一个名字，比如说是叫。上托吧，Superper s wir，然后我们保存一下，这边没有变化是因为我们还没有给他做任何的处理，之后style啊，我们还是以S的形式。下面点。三符号开里边设置一个高度。百分百。然后我们再保存。对吧，设置高度百分百之后，它下面就能够完整的显示出来了。那么接下来我们继续往下。那我们可以把这里改成，比如说改成四，这个也改成三，然后再保存。

对吧，现在呢，东西肯定是多了，但是你会发现，诶，到底的这个东西我们上下滑动滑不了了，对不对，所以说呢，我们需要先解决这个上下滑动的问题啊在这边。啊，我们可以把它，你看它左右好像能滑了，身上下反正滑不，咱们把它装在一个容器里，六。V。之后把这个东西放在这里边。然后我们再来保存。然后我们再来保存，这个时候呢，诶放在这里面之后。连东西都不出来了啊，那么因为我们这个class什么都没写，咱们需要对这个class进行一个描述。咱们在这呢，给它起个名，有个后。List之后保存一下。然后这个home list进行一个描述啊，就是对它的一个影响值。

拉到最下面。看一下这一块是home，然后它是在home的里边，对吧，应该是在home的里边，我们在这里。那不好看。之后啊，来一个把它撑开的。这些呢，我就不重复讲了，咱们每节课都前两节课，每节课几乎都会调用到这个命令，然后大家自己去看啊。之后呢，咱们给它加个边框，然后上边有是吧，那我们投稿上直接把它复制下来。

好，我们现在来保存看一下效果。还是滑动不了。然后呢，我们在这个。Swa里面进行一个优化。之后呢，他还是这个高度。分开的问题。我们在这儿也加一个类。呃，名字就叫做。啊，就是把它直接复制过来。好，然后我们保存一下，这个时候我们再对这个类进行一个描述啊，注意它是在呃，Homeper的下一层。的下一个。打括号。那现在不是往下滑不了吗？也就是说这个高度不对，对吧，咱们也给他一个高度，也是100%。

好，我们再来一下。啊，还是发动不了，我们再来看一下。咱们再加一个溢出隐藏。还是不行，我们来看一下。我来倒一下啊，现在呢，它是最外层的。对吧，给他应该高度100%，然后。这是里边的一层，也是100%。然后我们，但是这个也可以给他一个高度100%啊。所以以后你就记住了，如果说遇到像这种滑动不了啊，或者显示的高度给截取一半的，你就来一个。

百分百啊，然后他也是在它的下一层。然后点击一下保存。诶这次就可以了，对不对，这次就可以正常滑度了，咱们调了几个百分百之后。这个百分百什么意思，百分百就是说整个屏幕都给你占据了，整个屏幕的高度都占据了啊，那像我们之前没加他的时候，它呢，也是会涉及到一个撑开的问题。好的，然后呢，咱们想实现的效果对吧，你比如说我们有多少个猫超超时买粉整点抢半价，那咱们。以幻灯片的形式，对吧，这个是咱们官方给的一个例子，能够左右滑动，那么我们想的左右滑动是在哪调这里。ABC3个对吧，ABC3个是在它里边进行一个调，所以说呢，我们照葫芦画瓢，咱们这边也是一样把它。

复制。然后第二个第三个咱们保存一下，这个时候看他是不是就可左右滑了，你然后呢，为什么只有三个，因为你这里就复制了，对吧，这是第一，这是第一批，这是第二批，这是第三批，第一个第二个三个啊。这个呢，就是我们通过这个sweeper来实现的左右滑动。这样的一个效果。那么我们现在这样写呢，是已经可以实现出它这个横向的度，但是我们想要再优化一点，对吧？咱们回忆一下一开始讲组件的时候这个概念，咱们为什么要整一个组件，是因为你像啊这些东西，这么多东西，这么多行，我们要都把它放在这，都把它放在首页是不是很乱，对吧？所以说呢，咱们就用这一行代码来代替了这堆东西。对不对，而我们在这儿呢，你想它也会有很多个对吧，你你像我们一个两个三个四个五个六个七个八个，我们未来可能会有更多，那么你在这的话，就一个两个三个四个五六个七个八个，对不对，也会显得很很多，所以呢。

我们就可以在。可以。在。组件里面再建立一个，然后呢，因为它是大组件套的小组件啊，这L它本身就是个组件，我们想要在一个大组件里面再套一个组件，对吧，建它，那我们呢，就可以在这里面再新建一个，没有。对吧，你这个时候你不能说直接再建一个组件了，对吧，你要再建一个组件，就两个就是同底的。

对吧，那我们在这儿呢，就。选中，然后新建一个，你看它的结尾都是vuee对吧，我们也新建一个vuee文件。之后咱们起个名字。几个，比如说。你看这里我们要替换的是e team对吧，就叫做E。之后啊，咱们简单关键，那么在这里呢，还是三块啊，模板块小板块样式块。之后啊，我们就要把它装过来。咱们啊，可以这样。装到它的里边。

然后啊，我们。这边啊，咱们给他一个样纸，直接在这里面。啊。百分百，然后保存一下，然后呢，咱们再把它给插过来对吧。在这边。栗子。啊，没有是吧，没有的话我们手动改一下，手动写一下。好，然后再保存。

诶啊，保温之后我们这边还是没有。这是为什么，因为我们这样写呢，它。和它不是同级目录，所以说它不能直接这样调用上面的这些，之所以能够直接调用，是因为这里的list呢，目录名跟这个view的名是一样的，对吧？这个咱们之前也讲过，当他的名和他的名一样的时候，你就可以直接这样写，那么当他的名。和它那边不一样的时候，那么咱们想调用的话，就需要怎么样，需要有一个。啊，进行一个导入啊，或者叫做注册。什么什么from什么什么。这个呢，就是一个语法，就是导入什么，从什么什么对吧，那我们现在想要导入的是这个名字。

这个组件对吧，我们就把这个组件写在这里，然后from，我们只要敲一个引号。你号没出来呢。好吧，没出来，我们我们手打一下吧。那么这里看一下它的名字叫做team，对吧，把名字重新复制。好，我们现在在保存啊，这里直接给了一个报错，呃。From留影。这种包括通常都是少了个符号，我们加个逗号啊，还是有。行，那这个呢，咱们应该是继续写，还没有写完对吧，咱们现在呢是导入，导入之后还是要有一个注册。我们在下面注册一下。

括号。然后是咱们的这个list的名。别忘了加逗号，我们再来保存一下，还是offer，我们看一下，那应该不是这个注册的问题。绿色team from没问题，是我们这个地址写的绝对地址不对吗？我再重新写一下，他应该正常的话，应该会直接出来。Import。List。你寂寞。还是没出来。

我们上面拼的也没有错，那个地址。嗯。他和他是同级目录。那我们直接驾驶协议应该是正确的，我们再来看一下啊，就是确认的是这个位置。嗯，我们注册函数改了一个绝对地址，那应该也不是地址的问题，这里正常来说就是可以这样直接写一个点，应该是同级目录。哦，可能是我们这里，咱们多了一个杠。再试一下。

OK啊，现在呢，这里不会进行报错了，然后我们上面呢，就可以对它进行一个调用。我们应该是可以把这块。删除。然后。给你看一下。还是没有出来，现在没有报错了，但是这边没有出来。

啊，一。好啊，找到原因了，是因为刚才我们在这里的没有按照驼峰的格式去写，咱们刚才用的是小写。那这样的话，我们就无法在这边进行一个正常的调用了，对吧，那么我们把这边改成一个大写。刚刚的咱们应该是这个样子。对吧，那么这样的话是不可以，然后我们按照驼峰的格式这块给它改成一个大写，哎。之后啊，我们再点击一下保存啊，这样呢就可以了。然后呢，这个是一种方式，另外呢，像我们之前讲这个。

扩展组件。想扩展组件的时候，就是你如果说能够保持这边一致。比如说我把这个呃，List e文件，我单独的给它拿出来，我从这边重新建一个组件，那么咱们就不需要这个步骤，也不需要下面的这个步骤，对吧？但是呢，我们现在之所以需要，是因为我们没有把它单独的建议，什么叫单独建一呢？不要这样。我单独建一个。对吧，这样的话我们就不需要这个这两个步骤。如果说你没有单独建，而是把它放在一个目录里面，这样咱们是同级好看一点，那么你就需要啊，这里进行一个注册啊。好的，那么我们继续往下，咱们现在呢，可以有了上下滚动。

然后横向滚动对吧。这个一是我们刚才不小心打上去了。那么我们为什么说啊，要写这么多的组件。其实呢，按照官方的说法，这是符合一个编写的一个规则，但是咱们从一个新手的角度来讲，你想啊，如果说你像咱们这。一个商品啊，就是往上调用一次，然后在这边你就要写很多遍，如果你不用组件的话，你这个代码看起来是不是特别臃肿，而且你将来如果说改的话，你可能要改很多个地方，但是现在呢，我们用一个组件，比如说我们将来要改某一个位置，那么你只要改一次就可以，对吧，那么你如果说把这些。把这些都换荡出来。这一个。下面一个，那么你到时候要改的话，这改一次，这改一次，那么你有多少个就得改多少次，对不对，你这个工作量就比较大，但是呢，我们现在。

直接。都调用它，那么将来我们改的话，这边根本就不用动，咱们只要在这头改一次就可以了。明白了吗？所以说你将来凡是。可能会出现多次调用，哪怕你又调用两次，你最好都给它搁组件啊，如果说这个东西要调了很多次，那就一定要组件。OK，那么我们现在这边呢，算是呃，横着滚竖着滚都没有问题了，对吧，那接下来呢，咱们就是要实现一个。你现在看看你现在这下边动不动和上边没关系，上面动不动和下边也没关系，对吧，我们需要把它先，现在呢，需要把它去实现一个关联的一个效果。那么我们需要在首页啊，顶部这里立的，咱们给它传入一个。

咱们上面呢，有一个table list，我们在这儿呢。给他复制一份。之后咱们在这儿改个名。然后我们在list啊这个里边。那么这句话是什么意思呢？我们就等于说给他给list这个自定义组件传了一个参，对不对，那么我们给他传了，他就得收，对不对，我们之前讲过收是在哪里。在这里对吧。我们可以写一个周的。DOLLAR1米是往外边，是从子往父传，然后呢从父往子，我们用什么命令？

对吧，这个也写了，可以是数组或者对象，用于接收来自负组件的数据，对吧，就是用它来收。然后打开收的是什么，我们这边传的是什么，是一个T。对吧，那我们这边收的也是一个态度。是铁吧？之后再打开，那么呢，我们首先需要给它命名一个数据类型。嗯，一个字符串的类型，再给他来一个默认值。位值呢，可以是一个空的数组。啊，那我们上面的话就不应该是字符串，这是一个数组。没有。

这里。Return，返回一个输出。又有报错，这种报错估计又是拿少了个逗号啥的，内蒙的意思。对吧，加个刀。OK啊，报错没了。好，那我们现在呢，已经能够获取到这个选项卡的数量了，对吧，那我们现在选项卡的数量知道了，上面有几个选项卡，下面就会有几个。Sweeper对不对，咱们现在呢，就两个，那么我们怎么说手动去诶上面有数一个一个两个三四个五六个七个，那下面我们也这样复制七个。

我们家复制七这样的话行不行行，但是太low了对不对，我们既然已经都计算出来了，对吧。我们既然都已经计算出来了，咱们这是有几个选项卡，那我们下面就有几个这个per好不好。那么怎么解呢？咱们就可把它删除掉，咱们只留一个。只留一个，然后对他。做一个几次循环。对吧，我们刚刚不是这个样子吗，我们把它。逗号，我们把它删除掉。然后在这做一个一次循环，V杠后是循环对吧，V杠后。然后这里边儿我们也是老生常谈了，什么印什么。

那么后面你比如说你写个十，那么就等于是循环14对不对，你前面可以是一个括号，然后括号里面呢，通常都是ITM，然后逗号ind叉，这里呢就是序号一，就相当于索引ind叉的索引，这个呢就是值，说白了就是说你第几个安全地差第几个数。啊，一我是第几个数所对应的这个值对不对，然后我们在这里呢。你比如说你写个四。现在保存一下。一个两个三个四个对不对，那么我要写一个六，我再保存一个两个三，我们刷新一下。一个两个三个四个五个六个对吧，六个到头了，这里写几它就出现几，那么我们现在这个写法跟我刚才直接把它复制六四这是一回事啊，虽然说比刚才要显得经典一点，高级一点，但是仍然不是我们想要的一个最终的效果，对不对？咱们还是那句话，你现在都已经获取到了，对吧，你都已经获取到了这个。

数组，那么我们直接把这个配数跟他数同步不就可以了吗？对不对。我把这个六换成太。好，现在保存一下。这个时候诶，你看着没了对不对，为什么。后面来一个括号K。冒号。等于。

好了啊，我们在这边点一下保存之后，我们会发现他这边已经有了，对吧，我们数一下一个两个三个四个五个六个七个。八个，然再看下面一个两个三个四个六个七个八个对吧，到八就到头了，那么现在呢，我们就已经实现了，根据你上面选项卡的数量来定义下面我们滑动左右的它的一个数量啊，然后呢，呃，顺便说一下，刚才我们为什么下不显示，因为我们这块咱们刚才改完之后没有给它进行一个呃保存啊，咱们刚才呢，是这样的。对吧。所以说它下面是不显示，咱们虽然写了，但是刚才忘记点击保存了，我们点了保存之后它就有了。这是提醒大家要随手点一下保存。至少呢，你比如说我们随便加个东西，它前面有一个星号，有星号的情况下就是没有保存啊。

好的，那么咱们这节课呢，就跟大家分享到这里，咱们最后呢，再来总结一下咱们这节课讲的内容，咱们上节课啊，说已经让他实现了这里边儿的一个东西，然后呢，咱们先找到一个组件，对吧。想了一下它的组件重要性。把里面的东西。然后首页是在这把它装到一个组件里边，然后这个组件呢是list，我们跳转到这个关于list的一个组件。之后在list这个里边，我们又给他嵌套了一个新的小的一的一个组件。在这一个组件里面，我们想要实现左右滚动这样的一个效果，所以说我们用了一个sweeper啊，它呢能够像幻灯片一样实现一个滚动，咱说原原来人家默认的有一些自动播放啊，停留时间呢，咱们把那些都给删除掉了，因为咱们没有用，咱们就留了一个river，一个呃滚动的这样一个效果。

之后啊，我们把昨天啊写的这个给他搬了过来，搬了过来之后里边我们又给他签到了一个新的组件，对吧，就是他。就是这个东西，我们把它放到一个新的组件，然后呢，你有的时候你放过来之后，你会发现它会有一个断层，对不对，像我们有的时候可能在这就断了，那么这种情况呢，是很常见的，通常都是因为咱们这个核。高没有给他设置一个百分百啊，我们对于正层的没有展示的，或者下拉不了的，咱们给他设置一个百分百就可以了，你看这里每一个他们基本都给人家设置100%，这样呢才能够一个正常的显示，也是组件里面常常遇见的一个问题。再之后我们呢？一开始都是手动去设置，说下面有多少个这个片对吧，第一篇第二篇第三篇，那么我们。

可以通过上面它的数量来实现和它同步，就是说上面有几个，下面有几个，那么这样的话，我们就要先。在这里改一下，咱们原来不是写了多少多个吗？一个写了重复多个，咱们在这呢写了一个循环，然后循环的是什么？就是这个table。那么用table来计算有多少篇？那么这个table是什么呢？我们往下看，Table呢是从参数里面传进来的啊，它呢是一个数组。对吧。数组默认返回一个数组，那么它是由。参数类的。从父到子。他接收用它，然后我们看一下它是从哪传进来的，是从你代传进来的，对不对。

然后这个就是这个列表。啊，整体呢，大概就是这样的一个逻辑啊。好的啊，感谢您的关注，我是霍长亮，这节课呢，就跟大家分享到这里。