霍常亮淘宝客app开发系列视频课程第13节：滚动选项卡效果原创

哈喽，大家好，我是郭长亮，我们继续前面的课程，欢迎大家观看。那么。我们在啊。不是这个不是。下面这。我们在上一节课呢，跟大家讲完了关于顶部啊，这个导航的一个设置方法，然后这节课呢，咱们要讲的是关于下面的有一个选项卡，对吧？因为我们之前在设置数据库的时候，就有一个说，呃叫标签也好啊，叫导航也好啊，啊叫这个选项也好，就比如说你像天猫的天猫超市，呃淘礼金淘宝京东苏宁。对吧，那么我们就需要在这里能够让用户有一个清晰的展示。对不对。啊，就比如说在这里。

然后呢，交给可能是淘宝。礼金啊，天猫超市，苏宁等等的，然后呢，因为它过多，所以说我们这里要是展示不开的话，这里可以向左向右一个滑动啊，然后呢，我们还可以再增加一个设置项，比如说设置你要展示哪些啊，大概呢是这样的一个功能。那我们应该如何实现呢？好，那么这些呢？在这呢，咱们就把它删掉了，这个没有用，因为我们当时是为了演示这个滑动这个效果啊，是为了演示这个滑动的效果。啊，现在保存一下。那么这个时候我们要在它的下面，也是和上面那个导航一样，我们还是得做一个自定义的组件，对吧，比如说我们起个名字。

这样写呢，没有任何的诶。还有货呀，哦哦哦。两边的一样。对吧，这样。怎么这样写完之后还把我上班的导航给弄没了呀？

嗯，没问题啊，我正常写一个自定义组件还能影响到上面的导航，我们再试一下。啊，那可能是刚才哪不小心写错了，那么注意啊，这两边肯定得一样啊，多了一个斜杠，然后你不能说像我刚才犯这错误，你这边写个2AB，那边写个ta AB，那肯定不可以，然后呢，我们在这边找一个自定义组件之后呢，组件是装在哪里的这里的，对，那我们在这自自定义组件，这里面我们建一个组件名字呢，跟上边一样就可以tab。之后，呃，我们。创建一个同名目录。好，我们点击创件创建之后呢，它自然而然的会给你在下面创建一个table的文件夹和一个table.ve叫文件之后呢，我们随便从这写点啊，比如说这这是这，然后我们保存。

好，那么我们这边呢，已经给他引用了，这边写了，那为什么我们在首页这边调用之后，没有展示到这头呢。好，我们现在呢，把预览关掉，再开一下，就相当于一下重启一下啊，就相当于是重启了这个，呃，编译这个时候我们就看到了，对吧，那么我们这里有一个这里是table啊，我们自定义组件，然后调用到这。

然后就有它，那就说明我们至少说从首页到自定义组件页的这个调用啊，这里是没有问题的。之后啊，我们习惯性的在后面肯定得来个class对吧，那这个时候呢，我们就起个名这个type，然后给它定义一个类，然后呢，我们这边也是使用什么S。他怎么叫这么个名字呢？就是老跟非典似的。之后把我们上面那个菜板点菜。这个做好准备，然后呢。啊，这个删掉，看着电。

啊，咱暂时给他这样屏蔽一下，万一之后还要测试，还得再写个代码。那么我们在这条啊，这是tab，然后呢，对tab做了一个类class类啊，点是class，然后井号是ID。好，我们暂时呢，先空着啊，这里先不写，一会儿再写，先把上面的完成，这头呢，我们是要做一个滚动的选项法是吧，那么滚动的是secure will对吧，我们打一个U，看看能不能出来us。啊。应该就是好，那么可能有同学说，诶，那我不知道我想要的滚动它对应的什么代码，那怎么办，那我们在源码里面查一下对吧。我们呢，在幻灯片的资料里面啊，先给大家打包好了啊，技术组件我们直接把它复制，然后打开浏览器，然后在这里进行一个粘贴，它就会跳转到基础组件的页面了。

之后呢，我们可以往下拉，对吧，想要找滚动的。可滚动视图容器Q6对不对，那么我们就知道了，是它这个。组件名，然后呢，我们在这边就可以。填写扣六。那么我们现在。输入了studio之后，我们现在呢，可以看到有呃一些基础的选项啊，那么后面的这个选择是什么意思，它是什么意思。没关系啊，我们点击它到这来看一看。属性说明，往下拉往下拉往下拉。查看演示。允许横向。

然后我们看一下。啊，对应的这句话。对吧，是什么意思，允许纵向滚动，所以说以后呢，我们在学习的过程之中啊，即便说你结束了这套课程，你肯定也会啊，不断去摸索，去遇到新的源码，到时候你要是不懂。回过头来在组件里面查一查，看一看属性，说明人家都有对吧，这个就是你在学习其他的源码，就咱们课程中没讲过的，你可以可以对照组件的官方文档来进行学习。OK，那我们继续往下说。那么你试想一下，咱们绝大多数幻灯片，那是不是都是横着滑呀，对吧？很少有竖着滑的吧？那么我们要想改成横着滑，怎么改？非常简单，你把Y改成X。

这不就在这横着划了吗？对不对，然后呢，咱们可以再给他。来个类。这个类呢，起个名字啊，名字你随便写，比如说tab这个有点太短了啊，太短了咱们。嗯，咱们加点。C。啊，这个名字呢，还是那句话，你你就自己记得住就行啊，你改成张三李四都没人管你，你只要自己记得住就可以。这样啊，我们。在这儿的话。它就可以啊，它对应的是它，然后这个部分呢，我们可以放在下面。

之后呢，我们是想要在它里面给它填充一些滚动的图片之类的，对吧。之后呢，咱们是想让它有多个图片，多个图片的话可以组成一个数组循环，嗯。Four。没干货。循环里面我们之前也说过吧，就是什么in什么对吧，这个就是一个格式，比如说。Item in啊in呢，后面可以肯定是一个数。

就是你打算循环多少次？后面啊，加上一个比如说内容。要循环，循环的内容好，我们现在帮我看一下效果。对吧，那我们就把它循环了十次，那么我们如果说想要把这个E写在这儿，对吧，你就把这个序号写在这，那我们直接加上一个。大括号啊，两个大括号，然后。然后我们再保存一下。看着吧，一二三四七八九十就出来了。然后咱们前面呢，这还没写完对吧，这个样式咱们还没有给他写出来，嗯，照着上面写吧。

就是机器。之后，那么我们下面要干的就是写这几个class，擦呀擦呀擦呀擦呀，就写这几个class在哪写啊。在降水对吧，咱们三个块，这个是脚板块，这个是模板块，这个是降水块。先写最下面的啊。来个背景色吧。然后颜色你自己看着选。这个颜色这个差不多吧，就是他到时候可以再改。背景色，然后呢，为了跟下面对吧，咱们在这个位置和下面呢，有一个分割，再来一个下划线。

嗯，小边框。整卷都是英文的就不考虑，有很多是国内的四级都没有过的，同学们好，那么我们下边框。同样啊，边框呢，就跟我们之前写的folder一样，也是需要来一个粗细，对吧，比如说EP叉。然后再来一个颜色啊。边框下划线的颜色同样是也是灰色吧？这样，然后。好，我们现在点击一下保存。呃，这个颜色好像。有点深是吧，好像不太好看，不是我们改成白色了。变成白色。

然后再保存。对，这样的还厚。这个线。就是我们在这里设置的这个线，这个颜色好像也有点深，应该再给他来的浅一点。嗯。啊，算了，咱们先不叫这个针，就差不多就完了。这样啊。差不多就一条线而已。是这样吧，这个暂时先这样，然后我们继续。然后他的。高啊，宽呀，先写宽吧。宽的话，咱们应该是想希望它是100%吧。因为它本身。就是这个样子啊，咱们之前没有限制，就是这边还不明显，然后再来一个盒内样式。

Dogs said。那么到这儿呢，可能又有同学会问，哎，老师这句话是什么意思呀？这什么叫做盒子呀，对吧？那么我们打开咱们的幻灯片的资料，在这里呢，给大家进行了相关的备注。呃，它呢，属性允许您以特定的方式定义匹配某个区域的特定元素，例如说假如您需要并排放置两个带边框的框，可以通过。这个命令设置。这个命令对吧，它能够令浏览器呈现。出带有指定宽度和高度的光，并把边框和内边距放入锅内对吧？像我们刚才选用的就是它，对吧。

你呢，其实就可以按照字面意思去理解。Books就是一个盒啊，你就可以理解为就是要把它装在盒里，对吧。好，我们现在点击一下保存啊，已经点过了对吧。之后啊，我们再写下一层的这个啊。啊，我们可以直接写。因为我们主要是对它进行一个改变来控制，咱们现在不是竖着显示的嘛，我们让它变成横着显示的。点。

然后一个大括号。打开。之后呢，我们想让它变成横着显示。

他这里呢，是被挤压了对吧，然后我们。给他来一个垂直居中，再给他来一个高度。高度，比如说45P叉。然后我们再来试一下保存。循环的内则，它这回连容字都不让你看到了啊，连容字都没有了，那肯定还不是我们想要的效果，我们是想让它横向都能显示出来。

那么FL。然后呢，把它也装在一个盒子里。Box。之后咱们再保存一下。啊，好像还是没有变化。那我们呢？这样咱们对。现在咱们对它有了一个样式的定义，接下来呢，咱们再对底下的这一层再给他一个样式。

这里面呢，咱们来一个。这次我们再试一下。哎，这次就好多了，对吧，这次咱们没有说让他再竖着显示，这次已经是横着显示了，要循环的内容，要循环的内容对吧。那么他呢？这段代码等于零，那么这个时候其实就是不挤压的意思，然后如果说你想看看它的更加完整的解释，我们点击这里的幻灯片。啊，这里有啊这个属性呢，指定了元素的收缩规律对吧，我们挤压的话，不就把它尽量收缩嘛，然后当。啊。他呢？

不是弹性盒子对象的元素啊，这个属性是不起作用的，这也是为什么我们上面需要对弹性盒子进行一个。注明。这个就是语法呀，属性值啊，大家可以自己看。啊，那么我们现在呢，在这边已经是生产了，然后我们再来看看小程序这头。虽然说也能够显示出来这个文字，但是我们来看一下啊。那么这个位置是有一堆空白的，但是这呢上面就没有空白。干什么？就是因为我们在之前写这个底部导航的时候，咱们在这儿人家加了一个。45，但是实际上呢。不是45对吧，这个45是我们自己猜的。

那么它呢，我们在加载的时候，其实是已经算出来了，就是这个顶部这个状态条，我们应该把状态条这个高度写在这里，那么状态条的高度是多少？咱们这里已经写了。这个是不是状态的高度啊，我们直接复制一下。把它写在这里。那么我们应该复制什么？复制整段？好，那么我们现在试一下。难道因为我不是手打的，所以说你颜色你都不换了？

啊，我们在这里试一下，看看小程序这边会不会正常。现在这样改完之后连显示都不显示，我们来看一下，正常的话，你至少颜色会变吗，我们。直接复制的还不行吗？我先返回一下。现在呢，这个是默认的，我们需要改的就是它。

哦，哎，又马虎了。啊，像这种呢，因为它是动态的，所以说我们在前边呢，得加上一个挂号啊，这样的话才会把它当成一个变量去读取，要不然的话，人家会认为这是一个啊静态的纯的字符串啊，忽忽略了疏忽了啊，那我们再保存一下。

诶，这次光有个线，他怎么更往上了呀。嗯，我想一想，这个是状态条，状态条是在这，然后。哦对，应该是上面一个状态条，下面还得加上一个这个导航。对吧，我们还得加上一个这个导航的这个高度。那导航的高度是。这。对吧，我们已经算好了，下面已经算好了，把它复制上来。好，在这里加上它，再加上个它，然后我们再保存。诶，这次就对了啊，这次又下来了。

我们循环的是它对吧，然后我们就要在这个类里面进行设置。之后我们来一个。

他定呢，就是距离上下左右的一个距离啊，上下咱们不用管，可以是零。P叉，然后左右呢，可以来个10P叉。之后点击一下保存。啊，十是不是有点大呀。改成个八。五。啊，我感觉就可以了，对吧，因为你这个位置，你本身它就一行，你要是说它它它空空隙太大的话，它占地儿啊，对吧，我们现在呢，这个已经。滚动已经好了。在之后对吧，我们对这个里面的东西，咱们对它进行了十个循环，然后这里面的东西我们想调整一下它的字体也是在这个里边，对吧，我们要调整它的字体和它的样本都是在他的里面。

Size。比如说12。T叉啊，我们试一下看看小不小。好像有点太小了。我们跟上面的这个豆浆机差不多。14吧，我记得好像是。嗯，这个差不多，然后你也可以再加点颜色什么的。好像那这个颜色不太好。颜色应该选一个跟黑色接近的颜色。

差不多吧。好。好的，我们现在再来优化一下这里的内容，因为我们现在这里这就是一个十，那就是说给它循环了14，咱们呢，改成一个数组，对吧。意思之后咱们在这边技术所做一个定义。那么这里面呢，可以有一个。比如说名字呀，ID呀之类的那。

天猫。天猫超市。然后我们多循环几个，这次别忘了逗号，要不然一会又该因为逗号右边给我报错。天猫超市。京东。苏宁。拼多多。李金。

啊，假如说是这些啊，我们现在保存看一下效果。还是有一个报错。呃。这加了逗号的呀。18号是在这个位置。这里我们应该是改成单引号。保存一下。还是有个爆火。

是啊，他是说这个位置。这有什么问题？逗号大括号。这是多个。啊。咱们做的是一个list啊，List呢是需要有一个尖括号给它括起来啊，就是一个中括号给它括起来。应该是这儿的问题。好，我们现在来试一下。OK，这就可以了。

咱们要循环的是。Name。对吧，那这个内幕呢，就是我们这里写的，我们这里要是写写一个性别，那这里出现的也就是个性别，对不对。我们现在再保存一下，诶现在呢就正常了，对不对。所以我们这里出现了一个两个，三个，四个，五个，所以说这就出现了五个。呃，这样的话，咱们这个滑动的功能就体现不出来是吧，那我们再整理吧。首单礼金。超值买粉。

好，抢购，然后我们再来讨论一下。对吧，这个时候你至少说让我们滑动有意义对不对。嗯，我们这边呢，可以在。完善。这个呢，就是索引，就是我们在数据库衔接数据库的时候，对吧，还记得吧，咱们之前的课程在数据库之中也有一个关于一个分类的一个表，那么我们后期可能会衔接那些东西，那么索引呢，和数据库是需要挂钩的，就是将来用来呃辅助查询啊，你可以理解为就是一本书的那个目录啊，大概就是这样的一个功能。

好，我们到这儿呢，啊，这个滚动就差不多了，然后呢，我们初期计划就是在右侧再加上一个设置，就是一个齿轮的一个图标，它呢就是可以允许用户自己去设置，说我想展示哪一个，不想展示哪一个啊就是这些啊可以进行增删。对吧，主要还是山，那么这样的话，我们。就需要在view下面写一个对吧，因为这个水轮呢。可以当成一个固定的。其实要是跟他一块滑的话也行，你想就是用户。只有滑到最后才能看见这个齿轮。

或者说是不滑就能看见。嗯。差不多啊，反正我们先写着吧，先按照这个，呃。写死的这个位置啊，就是说那个你不用滑到最后也能看见，将来我们要是想让它和这个滚动在一块的话，你把它挪到上面来啊。那么我们在这里有没有？在这里呢啊，我们准备的就是一个水的一个字体图标对吧。那么这里这个图标啊，我们之前也讲过对不对，这个豆浆机左边这个这个放大镜对吧。是。上面哎，就图标呢，23对吧，就是他。那我们把它复制下来，咱们粘贴到这边。我们现在保看一下效果。对吧，这里呢，就出现了一个放大镜，那显然呢，我们想要的呢，是一个，呃，设置的啊，是一个齿轮，对不对，那么我们回到。

上一节课咱们幻灯片里面有一个地址，咱们找一下齿轮，就是设置的这个图标。然后我们找一个跟设置相关的啊。应该就应该是齿轮那种就可以对吧，这两个都可以。啊，咱们就是他吧，G对吧，我们把这改成G。G，好好，我们现在保存一下。对不对，这里就变成了一个齿轮，但是呢，我们是想让它跟它在下面是在同一行，而且会占据一个固定的位置啊。

然后嗯，各种居中。好，我们现在呢，保存一下。诶，他呢，虽然说移动了一下位置，但是还不是我们最终想要的目的。

我们现在看一下啊，展现方式啊，弹性布局，然后上下都是双向，左右都是居中。之后。调一下，还可以设置一下它这个。之后呢，还是没有达到我们想要的在一行显示的这个效果，对吧。然后我们在。Tap里面啊，你也给它加一个这个弹性。容器。好，我们再保存一下。OK，现在呢，我们已经以这种方式让他跑到了这边。

但是呢？我们还是感觉少了点东西啊，如果说我们这个位置想要再来一个竖线。是不是就更加美观了，对吧，我们现在呢，已经可以实现说呃，这有一个齿轮，然后我们现在还想要一个竖线啊。用来做一个间隔。

然后再来一个边框啊。

来一个和上面那个色儿差不多的吧。假如说啊，用它我们再报括一下。还没过来。哦，我们这里啊，又有一个失误啊，单位错了T叉。我保存一下。是吧，那这个时候我们可以看到它这就已经有了一个线啊。这个线你整一个红色是不是不太好看呢。啊，我们改一下这个颜色啊。我觉得还是深一点的，可能。可能会好一些。对吧，这样的话是不是应该更好一点，这里有了一个竖线。

然后呢，呃，可能就有同学会问啊，说这这个东西是什么意思啊，两个冒号，一个after，那么你记住了，这有一个after呢，就有可能还会有一个before，那么它的意思呢，就是在什么什么后边增加一个什么什么东西，然后这个before呢，就是在什么什么前边加一个什么什么东西啊，就是这个意思啊下面呢，这里我们。就是一个空格对吧，就是一个空，然后下面的这个宽度是一，那你要改成十，你看看什么效果。对吧。它控制的就是这里，然后这个颜色呢，控制的就是它的颜色。一有点小，我们改成二吧。然后top顶框底photo底对吧，左边零叉啊，宽度二啊，大概呢，就是这样的一个意思。

啊，我们这边呢，也算是至少看上去啊，算是完成了，但是呢，咱们还是属于一个静态的一个展现形式，因为我们。后面肯定是要跟数据库进行一个衔接，对吧，因为你你这边既然已经更新了，那人家用户不可能说每次都一样啊，你可以在你的数据库表里面进行一个更新，然后它这边会同时进行一个展示。好，咱们这节课呢，就先跟大家讲到这里啊，咱们呢，主要就是实现了一个的一个可视化的一个效果啊。OK啊，感谢您的关注，我是霍长亮，然后欢迎大家加我的QQ，微信，微博这边也先写一下。啊，直接艾特。搜索量就可以啊，感谢您的关注，拜拜。