00:01
接下来呢,我们就要继续完成首页的一些功能,就是搭建这个tab。下面呢,其实有三个组件,分别是想法推荐和热吧。那么我们希望做到的事呢,就是在点击切,点击推荐来到推荐这个组件,点击想法来到想法组件,点击热榜来到热榜这个组件,所以实现一个在那个tab切换功能。好了,那么这种tab切换怎么做呢?下面我们就一起来看啊。找到首页组件home。我们呢,不自己写啊,点击左上角这支笔,是不是我们进入编辑模式。好,拖到相应的位置啊,进入编辑模式之后呢,我们把这段文字呢,它已经不需要了,我们可以删掉,删掉之后呢,它显示出来了这个save area组件,我们把save area组件的宽度高度呢调为百分百啊,然后呢,给它一个背景色,这样呢将来好对比咱们的一个内容。对吧,和内容呢,比较有清晰的一个层次啊,那么我会调一个比较亮眼的颜色诶,Pink。
01:06
好,下面呢,我们要用一个tab组件,那么太B组件的第一种方式可以自己开发啊。但是这呢,我们打打算大家用一用一些它的一些组件,其实这里呢,它有太慢,就是这里有一个组件,叫我们来看一下,在UI组件里面专门有一个组件。在导航布局这一块有一个叫啊标签页主机。这是可以用的。可以用,但是呢。用上这个标签页呢,还得自己还要去一点点去操作一下,比较麻烦,这个样式改起来也很麻烦啊,那么但是这里刚好有一个高级组件,非常符合我们的需求,我们一起来看啊。高级组件呢,也是一样的,就是我们可以先来最上面收起,我们要看的是导航部分啊,那么导航部分呢,我们一上去看一看它的一个效果,然后最终呢,就可以找到我们想用的这个导航。
02:01
哎,就是这个导航。是不是我们移上去啊,是不是就这样的一个导航,只是我们要从四个要变成三个嘛,对吧,那怎么办呢,顶住它。在属性这一栏这里去调整属性呢,这里就有组件属性啊,它默认是四个,我们删掉一个不就可以了,同时这个name就是它显示的内容,我们改成想法。然后呢,推荐。然后就是热吧。你看就好了,然后呢,再把默认我们希望选中中间这个,那么它专门有一个叫current t ne,就是哪一个默认选中的下标啊,一开始零我们设置为一,诶那不就推进许动了吗。你看这样是不是就非踌速的就完成了一个这样的功能。而且我们可以在真机设备上去测一下啊,来,右键。我们全量编译,这里呢,全量编译,因为有那个组件啊,然后呢,我们找到我们的真机设备放右边吧。
03:05
你看这个效果就是这样的,点想法和前方的想法点推荐些推荐点热吧,点热吧,它是可以这样切换的。只是有个小问题,就是咱们这些文字呢,靠的太宽了,我们希望紧凑一点,同时文字呢大小呢,要稍微再大一些些,咱们这个文字有点小。对吧,这是这个,然后呢,以及下面的这个线啊,我们希望是咱们的这个主题色对吧,那么不希望是一个粉色的,所以接下来呢,我们要对这个组件的一些细节做一些调整。那这里就有问题来了,那么怎么去调整这个组织的细节呢?首先第一个啊,第一个一定要去看咱们的这个组件的一些配置项,看他有没有提供我们可以配置的部分来,那这时候我们要重新选中这个组件啊。在组件属性这一栏这里我们能看到可以配置的是这些内容我们已经配置的,然后还有它下边我们也指定了好通用属性和数据属性呢,跟这些没关系,然后再看样式,样式的话呢,好像也没有什么可以调整的地方,因为这些所有内容都是不继承的东西,所以你在这里设置的这个颜色,它里面并不会发生变化。
04:19
诶,那这个时候怎么办呢?这个时候就需要自己去组建里面去改它的这个组件的代码。才能达到你想要的这个样式效果。来我们呢,退出这个编辑模式啊,这时候我们发现它在这里呢,其实就是引入了一个组件对吧,叫hoc tab Switch这个这样的一个组件,那么这个组件在哪呢?在components那个下面,我们接下来就去components下面去找,诶就这个组件。那么整个组件的页面结构非常简单啊,就是最外面是一个view啊,里面又是一个view啊,外面是个容器,里面遍历生成的就是那个tab,三个tab啊,Tab呢有啊,上面一段文字和下面一个下划线组成,所以这个就是上面的文字,下面就是下划线。
05:04
好文字呢,我们希望它大一点,那么我们无非就是选找到这个类名啊,把它的这个文字可以调大。啊,默认情况下呢,我们都是16PS啊,我们就干脆大一点,然后呢,Active的时候呢,我们让它这个风扇更大一点。呃,18或者20都行啊。好了,我们就调了一下这个文字大小。好,调了文字大小之后呢,下面就是这个线它的一个颜色,我们可以把它线的颜色调成我们想要的这个蓝色。那么蓝色呢,就是咱们的这个0067F1这个颜色啊,然后我们再看。把它改成我们想要的蓝色。好,最后呢,就是我们还有一些可以调整的,因为文字变大了,所以说它的宽度呢,20就不够,比如说我们调成啊18乘以二就是36,我们就40PS吧,把它宽度调宽一些。好了,现在我们可以看一下效果,看效果增加B,看效果。
06:01
全量变异啊,最好是全量变异,因为我们改的是组件好,这个时候呢,我们就看到是不是它就稍微有些不太一样了,咱们的线呢,是不是就变成一个蓝色的了,对吧。好,接下来呢,我们要做的就是我们继续把这个内容呢,调的紧凑一点点,不要靠的这么对吧,这么这么宽,调紧凑一点的话呢,我们只要找到最外层容器啊,把它的宽度先去掉,给它加这个Mar。上下的不要左右,来个20%吧,我们来看效果。哎,这个时候他们是不是就比较紧凑了。对吧,他们就会稍微的紧凑一些些了啊就在这。好了,所以这样呢,我们就简要的把咱们的这个样式给填好了,并且他们的确很切换。然后背景色呢,有没有都无所谓啊,因为后续我们有这个。咱们的这个外面的背景去指定就好了,他们呢,只要有显示效果就OK,背景色有没有无所谓。
07:04
好了,那么到这里呢,我们就把这个基本给调好了。而且这个它上面的间距有点大啊,我们可以把这个button呢调成。呃。调成五,PS,我们让它间距少一点点。来看一下5PS它的效果啊。好,差不多就小一点点了,所以说你也可以调整它们之间的一个间间隙啊,如果说你希望这个线的宽度刚好等于文字宽度的话,就是38啊,就16它有两个文字嘛,乘以二就是。啊,18乘以二就是三六啊。这样呢,就跟它的文字大小就基本上是一致的了。好了,到这里呢,我们就给大家完成了上面的三个tap导航。那么整体我们再来看一下怎么做的啊。做法就是首先我们呢,去高级组件这里面拖拽的一个组件过来,然后修改它的一些内容。
08:00
然后呢,发现有些样式我们需要具体调整,这时候就要深入到组件内部去一点点去调整它的细节就是。啊,那么调整完之后呢,我们发现就是在这里显示的时候呢,它还是这个效果,这是对的,因为显示上它永远都是这个样子,但是只要我们在真机测试上它没有问题,那就OK了。所以上面部分我们就调好了。诶,那么接下来呢,我们就希望啊,它有三个组件,分别是想法推荐和热板点击的时候,这三个组件可以切换。诶,那这个怎么做呢。在做之前呢,我们先把三个组件先定义好。分别是啊,想法就thinking吧。来,我们把这三个组机先定一下啊。OK,想法的话呢,我们最外面是一个view,然后里面包括test叫想法OK,然后呢,这些样式我们都删掉,暂时用不上这样式。把thinking复制一份,我们再来一个,第二个呢叫推荐。
09:05
这个叫推荐。推荐的叫。然后呢,再复制一份叫呃热板热版的,我们叫hot就好了,Hot。好了,三个组件呢,我就定义好了,那么接下来呢,我希望这三个组件呢,随着我上面的tab导航的切换,它也一起发生切换,并且移上来呢,加载的是推荐这个组件。好,那这个怎么办呢?这个时候呢,我们就要大家去用上另外一个组件了。来这个组件呢,是属于系统组件,往下走叫一个frame group。诶,当然这个组件我们没有用过啊,Frame group呢,就是一组的frame组件,因为咱们现在有三个页面啊,在下面这里呢,三个有三个页面要切换,那么我们就可定义成一个frame group,在这里面上传三个页面,那么这三个页面就可以达到一个这样的切换效果了。
10:12
好,下面我们一起来看怎么做啊,首先呢,拖一个frame group,我们要做的就是把frame group的高度呢。大概固定在这个区域。因为将来我们要显示的内容也是在这个区域啊,好,那么要固定在这个区域呢,我们就去想这个高度怎么指定。那么这里呢,我们会大家用定位来做啊,定位的top的值就是上面的高度波的值就是零,这样呢,它的高度自然就会撑开了,左呢零,右也是零,那么自然就可以撑开整个元素的区域了。是不是这样就可以把它的内容给指定好,当然了,因为我们现在有个问题,就是因为屏幕的高度随着设备不一样啊,不一样,所以说你不能说直接把这个高度计算出来,所以我们可以用定位的方式啊,因为上面高度是固定的,所以定位的方式定起来就好了。
11:04
那么上面元素的高度是多少呢?我们可以去它那个组件里面再看一眼啊。整个高度是44PS,没有Mar也没有盆底对吧,所以说它的高度就是44PS,我们呢,接下来的位置就是定位在这个44这个位置就好了,当然了,它最好是有些margin啊,它没有marin的话有个问题啊,有个问题就是呃,跟这个下面的内容会隔太近,所以说我们还是要给他个margin bottom。上零六二十,那么下呢,我们来个10PS,所以最终呢,它的高度是54PS,但是54PS呢,又不包含上面这个这个这个导航啊,所以说我们设置的时候还得还得再再看看啊。我们来设置一下,先设置一下。找到这个元素。找到这个元素,选中它来改它的这个定位,选择定位啊,然后呢,上面是54PS。
12:02
下面是零,然后左零右零。我们给它一个背景色,我们来看一下它的效果最终会不会达到我们想要的效果。给他个白色的背景。好,这个目的是为了我们看一下它的效果能不能达到啊,来我们来看一下。好,这时候大家看一下是不是下面就白了,但是跟上面还是隔得太近了,原因还是一样,就是具备这个东西啊,具备这个导航。所以说呃,因为我这里是有刘海屏的,咱我这个手机是有刘海屏的,所以说它这里上面是有一块区域是不显示的,那么我们要加上这个区域的高度,那我这里简单指定一下,比方说我这里设置成。加个。我就设置80吧,我设个整数吧,咱们也别别整这么费劲了,80。来增量一下。
13:00
好80可以啊,但是稍微的有点多,75呢。70或者60 65。再看一下。65呢,就靠的比较的近一点点啊,靠的比较近一点,那也行吧,就我们就65左右吧,就65啊好了,那么这样呢,我们这个元素的一个大小就定义好了,那么它的这个背景白色呢啊,那就可有可无了。后面我们去删掉它这个背景色就好了。啊,就是零零,然后呢,百分0OK。OK,那这里我们就可以先不看了,继续我们再去开发。好了,那么这里怎么去塞它三个页面呢?Frame group怎么去整三个页面呢?首先第一步我们需要给它整一个ID属性,方便我将来去获取到这个动物元素。好ID属性取好了之后呢,接下来我们就要去对它进行操作了啊操作的话呢,我们需要一上来就要操作,所以第一种方式我们可以在这里去给API ready事件加东西。
14:06
但是在这里面写代码的话呢,非常的麻烦,没有任何提示啊,所以我们建议。去编辑器里面写。拿到编辑器里面,我们在API ready里面操作啊。来怎么操作呢?大家看我写啊,首先呢,先获取到这个frame,这个动物元素,Document get element BYD。动元素,那么这个动元素呢,专门有一个方法可以去加载咱们的这些数据的,这个方法呢,在过去在文档里面,我们之前有写啊,我们看一下。这个方法,这就是load来加载它的数据,同时set in来设置它的可见的frame。Frame啊in index就是默认显示哪个页面啊都可以做。好,我们来做啊,首先是漏的方法。加载加载的frames呢,是一个数组三个页面嘛,对吧,我们来写。
15:00
Name是页面的名字。那么ul是页面的这个地址,地址就是当前路径啊,当前路径呢,写不写点斜杠都行,点STL。就这样写的。那么我们再来两份啊,第二个是推荐recommend。最后一个是hot。Hot,那么这样呢,就是加载咱们的页面啊,加载页面。这样就会加载我们所有的页面,页面就会展示了。然后呢,一上来我们希望显示第二个的话呢,我们这里就得定义一个index。那它值为一,这样的话呢,它就会一上来显示第一个,就是说白了就是第二个这个页面,因为下边是零开始一就是第二个。好,我们来看效果。
16:02
哎,是不是就显示推荐了,然后呢,因为我们开启,因为我们没有禁用掉它的一个pro啊,所以说它是可以滚动切换的,是不是,你看滚动这三个三个页面就在切换。是可以滑动切换的,就是我们鼠标滑,我们手滑过去啊,它就会切换了。好,那么除此之外呢,我们还想做一个事,就是点击上面的tap导航,下面也发生与之对应的变化,当然现在没有变,对吧?我们现在点击希望它变,那接下来怎么做呢?一起来看啊,点击上面导航,那么我们希望就是给上面的添加一个点击事件,点击的时候我们需要得到它点击的这个下标,然后对它进行操作。我们找到这个,我们进入这个可视化编辑工具代码这里啊,那么选中这个组件,在事件这里有专门适用于组件的事件点击啊。这个ta click就是适用于主机的这个事件,它不叫click,叫tab click tapb呢就是当我们tab页面处点击的时候,就会触发这个事件。
17:05
好,触发世界的时候呢,我们可以新建一个回调函数啊,这个回调函数呢,我们就叫。呃,就叫吧。很厉害啊,好啊,他可以得到一个疑问对象。这这个函数里面呢,可以得到一个对象。疑问对象,那么疑问对象里面啊,就有一个。Detail属性就是我们传递的参数,其中传递参数有一个叫cur tab index,这个就是我们这个点击的这个下标了。我们可以通过API。去提示一下啊,看一下这个值是不是我们写的校标。来点确定,确定之后呢,再把这个函数绑定到这个世界上,OK,到这里有点小问题啊,我们确定再选择这个函数好,那么这样呢,就相当是给这个组机绑定了一个叫tab的世界,然后指定的一个tab的回调好,这个回调呢,就会去apilert那个方法那个属性啊。
18:11
来,我们来看效果。同样的,要be。点击,哎,你看提示二,再点击提示一,再点击提示零,是不是就提示了。好,有了这个下标,接下来我们就可干活了啊,有了下标之后怎么办呢?来这时候我们要呃,回到这个。编辑器模式,这样的字更好写功能啊,回到这个模式更好写功能。然后呢,在这里我们呢,点击时候已经提示了啊,提示了咱们这个下标,这个下标呢,我们存起来。帮忙价这十点。See。C u r e n in death。好了,那么这个下边呢,我要更新成data数据,更新成data数据的目的呢,就是为了啊,将来呢,我们这个frame能够获取到这些数据啊,当然你不更新的话呢,也OK啊,也能够用。
19:11
但是最好是更新一下,因为我们将来有其他地方要用,我们把它更新成一个数据。看呢,一上只是为一啊,然后呢,这里面一旦我们操作的数据我就更新。好了,更新的数据之后呢,这是更新数据啊,这是获取。泰点击的下标对吧。然后呢,我们更新数据。更新到data中。好,除了更新调查数据呢,我们还要设置咱们的。显示第第几个呢,Current in desk。页面显示这个页面,那么这个时候我们继续啊,又要用上这个方法了。哎,怎么我们API ready这个。
20:02
代码他在这里没有体现。我们来看一下位置错了吗?没错,他这里我们编辑代码,怎么这个事件它没有体现出来,OK啊,有时候就会出现一张问题啊,我们写了这代码突然就没了,又得重写了。OK,写的代码没了,我们又得重写了,重新来一遍吧。来,就是这个frames等于document get element BYD,找到这个frame。然后呢,通过frame点。啊,去加载我们整个的这个啊数据。那么数据呢,就是这样写的啊,Name呢是它的名称叫。第一个呢,我们叫想法thinking。然后呢,URL就是它主机的地址。
21:06
好,要做的就是来三份。第二个叫。这一个叫hot。写完之后要保存一下,防止它出问题好了,那么接下来呢,我们继续啊,当我们点击获取下标的时候呢,我们要拿到这个元素啊,然后调用它的一个方法叫set index来设置我们到底要去哪个页面,Set index啊setex呢,要传index,这个数据就是哪个index就是index,那么接下来我们的页面才会与之对应的发生变化。好,我们全量更新一下。来,一起来看效果啊。我点击上面的热吧,诶你看下面的前方的热吧,点击想法,对想法点击推荐就推荐就这样的。然后呢,默认它是瞬间过去的,如果你想要有有动画效果的话,可以加一个。
22:01
为触这样的话就会滚动过去啊,就就会效果上呢好看一些些。点击对吧,这样呢,就是一个这样的效果,这样就会好看那么一点点。好了。然后最后一个功能就是当我下面页面切换的时候,上面的值也发生变化。好,这个时候呢,我们就大家写啊,当下面发生变化的时候,是frame发生变化,它会触发这个change事件。确定时间。然后change世界里面呢,我们去set这个对吧,或者说我们就叫from change。好,来到这里面啊,它的页面是会自动切换的,我们接下来要做的就是更新这个current index的值啊,更新current in的值,那么这时候等于什么呢?等于一点。啊,这时候就是它不是detail啊,这时候啊是detail是detail,只是它的值是叫index不一样啊,上面这个是我们的那个组件,组件里面实际上是叫这个,但是下面这个是叫index。
23:09
好,但是你这样更新的话呢,还是不太行啊,我们再看效果。我们下面点。其实这个index已经更新了,已经更新了,但是它是不行的。有没更新我们一下就好了。我们lot一下这个一点它一点点这个index,我们看效果。来广东,你看是不是这个值的确是对的。想法是零对吧,想法是零,这个只是对的好,只是呢,它上面没有变,上面没有变的原因就是因为咱们目前我们更新的这个index和它页面对应的index没有联系啊,所以我们要给它传递这个数据,传递这个数据它要产生联系,而且我们这个frame这个数据呢,也应该用这个数据啊,不能写死啊,也应该用这个death。
24:05
乙生来到底是几,用current death来决定。好,但是你这样传的话还不够,原因就是因为这个主机内部呢,它只是一上来把这个纸用了一下。一上来把它直用一下,后面就不会用了。后面的话是自己内部在做分析。那这时候怎么办呢?这时候我们应该保证了这个组件里面用的这个下标,就是到底谁要被选择下标就是外面传过的纸。自己不要定义了。所以我们接下来要做的就是把count定义的东西给删掉,Count定义的东西都给删掉。然后呢,再把上面用看的地方换成我们传递的这个数据就好了。所以他这里比较的时候,拿的都是我们传过来的这数据进行比较,因为我们外面会更新这个数据,而他内部呢,不需要定义任何东西,也不需要更新。这样最终才能达到我们的效果,我们对这个组件呢做了一些功能上的修改。
25:01
来看,首先我们点击上面,你看下面在发生变化没问题,当我们滚动下面,上面也会发生相应的变化,诶这样呢,就达到这个tab切换的一个效果。好,这里呢,这里要注意的就是我们对这个它的这个高级组件做了一些修改啊,主要修改呢,在于第一个是样式方面做了修改,第二是功能方面做了修改。那么最终才能达到我们小的需求。好了,呃,以上呢,就是我们这个tab切换的整个内容了。好了,大家相信在这里呢,大家应该能够知道啊,该怎么去开发。
我来说两句