00:01
好的,我们继续啊,那个到现在为止呢,我们主页的内容呢,哎,就写的差不多了,那接下来呢,我们去写一下这个对应的个人中心页啊,那么要讲个人中心页呢,大家看一下啊,它呢其实是跟底部这个table啊导航关联的,那我们点不同的导航呢,它访问的是不同的页面,对吧?那除了个人中心呢啊,对应的还有个视频页,现在的视频页其实我们看不了,因为啥呢,没有登录的情况,你一点呢,它就来到这个登录界面了,那这个呢,我们先不用管啊,我们回到主页,现在呢,你要整这个table bar的话,最起码对应的是不是有一个视频页,有一个个人中心页呀,好,那这样的话呢。我们来到pages下边啊,咱们先把之前的收起来,我们需要再整两个页面来啊,一个呢叫video啊,就视频页,然后呢,我再创建一个文件夹啊,文件夹啊来把这个取消掉,右键啊,我们新建一个文件夹,那这个呢,应该叫a personal,好,那现在呢,两个页面的文件夹呢,有了,那为了方便的话呢,啊,我会选择在我们的开发工具里边呢,在这里啊右键我们可以一键去新建配置,也是页面的四个文件,那这个呢,在我们平时的IDE啊,就是web storm里面,它是没有这个功能的。
01:23
所以啊,遇到这种情况呢,大家可以来到开发工具里边右键新建配置,那这个呢,那就是personal走好,那对应的四个页,呃四个呃文件呢就有了,而且啊,它会把当前页面的路径呢,自动的写入到我们app.js中,对吧?好,那这是这个,那我们紧接着呢,再去创建一个啊video的页面的四个文件。好,那这个呢也出来了啊,然后呢,确认一下路径是不是也写入了,没有问题,那有了这些页面以后呢,我们回到我们这个web中啊,那这个时候大家看啊,一共有三个页面,我们要像我之前写好的这个项目一样,用底部导航来控制它。
02:12
对吧?啊,那这个在大家学完的view中,如果说让你们去写的话,你们会怎么去设计它。来琢磨琢磨。我点击不同的选项呢,显示不同的页面,在我们view里面,我们是不是可以设置。为什么呀,路由组件,而底部的这一个一个的选项呢?那它们都为什么路由链接。对吧?啊,我们可以用router link去搞定它啊,那这样的话呢,那上边的三个页面的对应的都是三个路由组件,对不对?哎,那这是我们在view里面的一个思路啊,那在小程序里面如何去实现它呢?哎,很简单啊,那那这个时候呢,我们来到官网的框架。找到我们全局的配置在这里啊,我们已经接触过了这个pages和window了,对吧,那么再往下呢,这儿有一个table bar,哎,Table底部栏的表现,那现在呢,我们点击一下这个table啊,看它下边怎么说。
03:17
你看啊,在T里边呢,有这么多选项啊,有这么多选项,那必填的选项你看啊,像这这三个啊,什么color字体颜色呀,雪状的字体颜色,包括这个背景颜色。对吧,啊,这是必填的,还有一个是list啊,那其实最最重要的呢,是这个,哎,最重要的是这个。哎,List是干嘛的呢?T的列表,哎,详见list属性说明啊,最少两个,最多五个。那这个应该能理解为什么最少两个呀,很简单嘛,我们现在呢是要替切换对吧,那我要能切换你至少是不是两个及两个以上呀。
04:01
然后最多五个啊,这个大家可以琢磨一下,你们平时去看别人的移动端的项目啊,那很多的移动端项目呢,它都有这种布局方式啊,就是在底部有这个tap栏,那你可以回想一下你借过的这个tap栏最多的有几项。啊,那这些呢,都是一些大厂的这些高级的设计师啊去设计的啊,研究的发现我们底部tip栏呢,最多是五个,如果超过五个呢,就会发现它的密度太大,就是密密麻麻的,反而会导致我们这个页面呢不好看,所以这最多是五个。好的,那这个list里边怎么写呢?哎,下边这儿呢,有说明,List对应的是一个数组。只能配置最少两个,最多五个tap,而里边的每一项呢,是一个对象来,其属性值如下,那么每一个对象就是以每一个tap页面的配置,那在这个里边呢,有这么四个属性啊,P pass页面的路径。
05:07
而这个路径呢,必须在pages中先定义啊,那这个呢,我们已经定义过了,对吧,然后text啊,Tap上的按钮文字,那么这个对应的是谁呢?哎,是这个东西。啊,下边这这不有个主页嘛啊,包括这个视频以及个人中心,好,那这是这个啊还有啥呢,I pass呢,那就是字体的,呃,字体图标的路径呗。那这儿的I呢,指的是小图标啊,图片的路径注意啊,在这里呢,它是不支持网络图片的,所以一定要注意啊,你真正要在这儿用自用这个icon图标的话呢,需要用本地的图片,而下边这个selected的I pass,那就是血咒时的图片路径,好,那这个时候大家看啊。你看现在这个呢,是这个颜色,然后当我点击个人中心的时候呢,诶主页这儿呢,是不是又变成了灰色。
06:05
对吧,哎,变成了灰色,那说明我们在这儿呢,要准备,呃,在一个tip上呢,我们要准备一套图片啊,一个是灰色的,未选中的,一个是血中高亮的啊,就是这种颜色的。好的,那么看完这个呢,我们可以来到我们的这个里边啊,去写一写啊,在app.js中呢,我们需要再多一个选项,再多一个选项,那么在这里写呢,它没有提示啊,我们可以来到这里,大家看一下,我在这儿呢,输一个TABLE1回车,诶,你会发现默认多了这么多东西啊,省事嘛啊这就是这个微信开发工具的一个好处,然后啊,在这里呢,我们把对应的内容改一改啊,我们就来到web storm里面去改,那这样的话呢,需要这一侧干嘛去保存一下啊,走啊,只有这样的话呢,它才会同步到这里。好的,那页面的pass,那我们改一改,那参与这个路径啊,那第一个那就index呗。
07:05
然后呢,接下来我们改成什么啊,主页啊,对应的icon plus以及selected icon plus呢,对应的在我们的static下面。啊,有个images,好,那这里有个tips啊,在这里呢,我是随便找了一下,放了很多,那首先主页的啊,我们看一下我们对应的用的是这一段,一个是tap my,一个是tap my current,好了,那现在呢,我们在这里去找一下这个图片的路径啊,首先呢,它应该是呃跟路径像static下边的,Images下边,Tips下边的。哎,Tap买一点平击。那么对应的下面这个路径。我们只需要把后边这个图片地址一换就好了,好,那这样的话呢,其实一个配备的选项呢,我们就配置好了,那么接下来呢,我给大家把这个啊格式化一下,我们换行换下来,大家看的清楚一点,来把这个搞一个缩进,那现在一个tip配好了以后呢,我们可以去给它复制两份啊,因为我们一共有三个嘛,走。
08:07
然后把后边这个哎修改一下,那这个呢,是第二个是video对吧?哎,Video那这儿的页面弄清啊,注意一定要跟上面这个对吧对应,你上面叫video,那你下边就叫video,不能瞎写。啊,对应的这里边啊,那这儿的文本呢,就是视频呗,然后啊,对应的这个图标啊,这个图标呢,大家要注意啊,我用的是你看这个。是个打对勾的啊,那对应的呢,是哪一对的是这一段s select和s selectck t好的,那现在啊,我们去找一下这一张图,然后呢,把之前这个换掉啊,下边这个selected也需要换掉。好的,那这是这个来最后一个是我们的啊个人中心,那把这个换掉啊,文本呢,我们写写啊,啊个人中心啊,对个对应的个人中心的这个啊,个人中心的这个我们找找看。
09:07
呃,来看一眼。啊,那刚才我咱们还整整岔岔劈了是吧,个人中心这个啊,主页的呢,用的是哪个,用的是这个小房子的啊,小房子的那么小房子的那对应的啊,我们找找看啊是这一段啊是home的来,那现在呢,我们去把这个校正过了啊,那小房子的是哪个,是这个home,然后对应的啊那就home current。咱们把这个一换OK,而个人中心的话呢,我们用的是这个tap my。嗯,那这呢,那就不用动了,OK,那这个时候呢,回到我们的项目,这个时候大家看一下,诶这个就好了。而且我们已经可以切换了,你看视频页,个人中心页没有问题,哎,只不过在这里你走,我们现在还没什么也没有写,对吧,它是默认的文本。
10:02
好了,那这个呢,相比我们view或者rank里面的路由设计啊,更为简单一些啊,更为简单一些,那这个时候呢,可能大家看这啊,这个默认的字体呢,是这个意思。嗯,那这个颜色呢,是接近于微信的这个logo的主题色啊,是这个,那现在呢,很明显我们不要啊,我们不要,我们需要呢,去设置一下这个字体的颜色,对吧?那刚才我们看到了啊,那上面我们说了,除了这个list呢,对应的还有什么color,那我们可以给它设置一下。注意啊,它呢跟list是平级,所以呢收起啊,避免出错呢,大家可以把这个收起来,然后在它的上面呢,我们去写一个啊,那这儿呢,我们就用这个井号333法颜色重一点,同时呢,我们还应该再设置一个叫雪中的字体颜色啊,那这个颜色呢,我当初写的时候啊,是让它跟我们下边啊这个东西呢保持一致。
11:07
啊,跟下边这个IQ图标的颜色保持一致,那当初这个颜色呢,我是用取色器啊,去吸了一下它的颜色啊,那现在呢,我直接去我写好这个项目呢,给大家把这个颜色拿过来啊,这里呢,我们就不浪费时间用取色器,哎,去吸了好了,把这个整过来。那么其实它还有一个什么呀,叫备填的属性啊,背填的属性是这个背景颜色,那其实你看啊,我之前写好这个背景颜色呢,那是这个,那在这里我们可以给它加一下这个颜色啊,那默认呢,我们就来个白白色吧,来把这个加上来,而且大家要注意啊,在这里它支持的颜色是16进制的啊,16进制的,所以呢,我们只能用这种井号的FF的形式去写。
12:00
好的,那这个时候呢,再看一下啊,咱的项目。诶,你会发现就好了,哎,那这节课呢,我们主要是学习了一下啊,这个table bar的使用,它呢主要是用于我们底部tap栏的切换,那么当然你去看一下这个table bar,它还有一项呢,叫position啊,Tap板的位置,这个ta班呢也可以支,除了支持bottom呢,也支持什么呀。Top。也就是说这个切换呢,可以放置于顶部。只不过放置于顶部的时候,大家看啊,当P为top的时候呢,是不能显示出来I扣的,来我们看一看。啊,测试一把啊,那现在呢,我们去加一个,诶,我们加一个P,然后呢,对应的值呢,我们给它来一个top,走,那来到我们的模拟器里边。这个时候大家看是不是在顶部了。
13:02
哎,顶部呢,虽然不能用I扣了,但是你会发现啊,它会为我们默认的tip是不是加一个下下边框一样的,哎,这个高亮显示,那顶部如果是放那个小图标的话,不好看啊,不如放一个这个下边框,那这都都是人家设计好的,那这样的话呢,就看大家到时候的需求啊,你到底是用顶部呢,还是用底部呢?那在我们当前的项目呢,用底部啊,所以呢,我就把它删掉了,那大家知道有这个东西就OK,好的,把这个删掉以后啊,再还原一下就是我们最终t bar的效果。哎,那这节课呢,我们先讲到这里。
我来说两句