霍常亮淘宝客app开发系列视频课程第30节：app顶部标题导航效果原创

哈喽，大家好，我是霍长亮，那我们继续前面的课程，咱们呢，在上一课呢，已经。在上一节课呢，已经实现了一个关于底部的啊RA的一个功能的实现。然后这节课呢，我们需要讲的是关于一个顶部啊，咱们就从上往下写吧，软件的最初的一个构思呢，顶部或者是一个就是一个导航吧，一个搜索框的一个这样的一个东西。好，我们现在啊，找到首页对吧，这个是咱们的。什么样？在这里呢，我们可以先把默认自带的这些东西啊，没用的给它删除掉。然后包括下面的这些样式，这些样式都是描述这个东西啊，都是描述这个图片的。

然后我们现在保存一下。好，我们现在这个顶部已经是空了，对吧。之后呢，我们在这里。我们使用。啊，这个名称啊，它还真的是很容易引起歧义啊，这个跟这个非典是两码事啊，没有任何的关系的。那么这个东西我们在勾选，在选中之后。它呢，就是相当于是一个调用样之类的一个组件啊，那么我们需要第一次使用的话，你需要对它进行一个开启啊。在工具。然后。设置。

插件常用配置。应该是插件配置。啊，不是在配置中，那应该是在啊，这里有一个插件安装，是在插件安装里面。那么我们找到。S，对吧，那么因为我这边呢，已经是安装过了，所以说呢，我这边显示的是卸载，那么如果说你第一次使用的话，那这里的话应该显示的是安装对吧。设的是。在这边我先把它给关掉了啊。是在这个工具，然后插件安装啊，在这个里面。然后呢，我们在上面随便写点东西，比如说大家好，我叫郭长亮，我是中国人。

可好，我们点击一下保存，这个时候我们可以看到这是我们想要输出的文字，但是呢，它顶部啊，这里有一个默认的啊，这个叫做标题栏也好，就导航栏也好，那么这个东西显然是我们不需要的啊，那我们先把它给处理掉。

咱们自己来个指定的样式。哦。这样的话还是在把里面啊，我们不要这个把。那到这应该就可以。然后我们看一下这里导航栏样式啊，你不需要把整段都背下来，你你只要知道几个开头字符，然后自然而然给你一个提示。之后呢，我们后面这边啊，你可以写它的样式。那比如说我们写一个poster，这个呢，你打个C它就出来了，它的意思就是说我们不要这边我们想要来一个自定义的一个导航栏啊，我们现在保存一下。对吧，之后。有了这句话，下面这句话。你就看到了啊，那么上面的导航栏就没有了，这是咱们要说的第一步啊。

使用自定义导航栏代替默认的导航栏。然后呢，我们现在回到首页这边。我们现在呢，既然说已经把人家。默认的给取消了，那咱们就得给人家增加一个自定义的对不对，那么我们呢，如果说把整段说关于这个自定义的这个这个都写在这，那是不是占据的空间太大了，对吧，看起来比较乱，所以呢，我们这种情况下，通常呢，都会使用一个自定义的组件，然后呢，把这个关于导航那个代码都放在这个组件里边。

至于怎么写组件，还记得咱们之前讲的内容吧。在这啊，我们新建一个目录。用这个目录啊，咱们就给它专门盛放组件用。好之后咱们在这就可以创建一个组件啊，新建一个组件。比如说这里得勾选创建同名的目录，然后呢，这里咱们起个名字，咱们打算把它当成一个顶部的导航，对吧。他说这个呢，没有一定之规啊，你要是觉得这个名字不好听，你改成你自己的名字，你只要后面与之同步更改就可以，没有必要说非得跟我一样。好，我们现在呢，建立之后啊，我们再打开，打开这两个，这个自然然就有了。

那么我们。接下来就是需要把我们想要自定义的。导航栏啊，不是叫标题栏，给它放在这个NAV bar放在这里边进行专研。啊，比如说我们在这随便写一个吧，是吧。这里是准备的。导航标题栏对吧，然后我们点击一下保存，那么我们现在。弄完之后这边没有任何的变化，没有反应对不对，因为我们这边还没有引入呢。需要在啊，我先把门给它关掉啊，需要在这头给他一一个引入。对不对，那引入的是什么。我们打一个N。啊。没出来是吧，没出来的话，我们自己手动打一下吧。

NAV。BA2。然后。再来一个。斜杠na na。A2。然后现在保存这个时候你就看到，诶这里已经出来了。然后呢，这还有一个小的细节啊，就是说我们以前呢，还需要注册一下，就是把这个嗯na在下面进行一下注册，但是呢，现在已经不需要了，为什么？因为当你这边是同名的时候，你直接可以引入啊，不需要在下面进行注册了。对吧，你以前在script里边啊，你还需要来一个port，什么什么from什么什么，你要导入注册，从哪导入从哪注册，对吧，但是现在呢，咱们就不需要了，对吧。

啊，以前我写一下吧。你，他。From对吧，以前你还需要在这里写一行，这个是代码，但是现在呢，已经不需要了啊，你只要说这是同名的。什么叫同名？它它是同龄的，那么你就可以直接调用。就不需要再导入一下。好，那么咱们现在呢，把这段就可删除掉了啊，这个没啥用了。当时咱们就是为了证明这个页面展示没有问题。我们现在保存，然后下面就没了，然后呢，我们现在要写导航的，导航肯定不是说这几个文字对吧，咱们把这几个文字可以给它删除掉。

之后呢，咱们在这呢可以。找一个类啊。类的名字对吧，咱们就是导航NAV。之后咱们在这光写了个类名，但是没有用，对不对，因为我们还没有对这个类进行一个描述，那我们在下面。可以写一个NAV bar的一个。相关度。对吧，这里呢，我们也。加上一个。之后啊，一个大括号。打开这里边儿呢，我们想要整的是一个导航栏，对吧，那么这导航栏咱们大概就是这样的一个图。

这样的一个东西，那么我们需要给他讲一下它的呃，宽度，高度，还有背景色。对吧，那么宽呢。写一个W他就出来了。通常呢，我们都是直接百分百。就是让它到头，然后呢，我们后期可以再改对吧，你也可以设置一个80%，然后你右边可以来一个置顶啊，就是往上点击一下就到头啊，比如说你增加点其他的东西都可以。咱们在这呢，暂时呢，先写一个100%，一会儿如果有需要再来。高呢？通常来说呢，就是45P叉。

好，我们现在点击保存，诶，你会发现好像什么变化都没有，为什么？因为你光设置了一个导航栏，但是你这。系统能知道对吧，你看我们系统能知道你这有一个东西，可是你肉眼看不到，你没有给它命名一个颜色，那我们再来一个颜色。背景色对吧。来一个红色粉色。嗯，我们挑一个色，这有四。这个可以吗？还是上面那个这两个都可以看啊，就是他吧。

然后我们现在再保存一下，这个时候你就看到了，对吧，它已经有颜色了，然后然后也能看出来这个高度跟宽度了，你你之前它是看不出来的，对吧，因为你没有颜色，它也区分不出来。然后呢，我们在系统之中啊，也给你准备了一些常见的四对吧，就是你们你们点击这个UN这个咱们使用它之后，在这里可以看到相关的颜色，那么打个比方啊，我们假如说我们想要这个颜色。对吧，那么我们可以直接。复制它。然后在这粘贴之后我们保存。诶，看着没变化，难道说我们选的这个颜色和我。然后难道说这个系统这个颜色跟我刚才选的颜色是一个，那可能就巧了，这样我们再换一个。如果我们换成一个绿色的。

然后我们复制一下，它在这边粘贴。然后保存。对吧，那这个时候就变成了绿色，所以说呢，你在使用调用颜色的时候，如果说你有一个颜色是经常要使用的。那么你可以把它放到这儿啊，命名为一个全局变量啊，一个相关的颜色。它可能这这个是巧合啊，就可能说它这个颜色跟我选的是一样的啊。同样，那么这些呢是默认的，那如果说你想要增加一些，那你直接在上面可以自己命名，然后写一下颜色，写完之后同样可以在这边进行一个调用啊。好的，那么这个顶部的背景色有了，我们接着写，咱们正常逻辑呢，我们想想一想啊，就是你所见过的大部分淘宝的APP，它顶部是不是都一个搜索呀，包括说淘宝京东。

天猫苏宁都是一样，屏幕是一个搜索框，对吧，那么我们也照顾了空调，人家有搜索说明有搜索的道理，我们呢，也建立一个关于搜索的一个块啊。搜索。这样写的话是不是有点。不够高大上的都用英文是吧。好，那我现在保存一下。这个时候呢，还没有反应对吧，因为我们还没有对这个class进行一个定义。然后我们这里面呢，应该会有一个搜索框对吧，搜索框它可能在。

你想一下正常搜索是不是这块是一个搜索框，搜索放在最左边，是一个类似于搜索一个按钮，一个放大镜似的一个东西，对吧。那么我们。UV。这个呢是一个小图标。有为。嗯。这个呢，应该是一个文字。文字的话，我们应该比较好好做显示，我们直接写在这试试看啊，比如说。

叫做零元叫做，叫做叫做。豆浆机，假如说您用户想搜索豆浆机，对吧。好，现在豆浆机这个字出来了，但是肯定不是我们想要的那个效果，我们想要的是一个搜索的一个样式，对吧，那我们继续对这三个进行一个进一步的描写。

然后保存一下。对吧，现在呢，有了一个白色的背景色。然后这个显然不是我们想要的搜索那个样式。咱们。写完了大的色是对吧，这是大的色，它里面还有两个小的是它属于它的子类啊。所以说我们直接在这，在他的。子类里面子类的位置写。我们之间。也是啊，需要给它一个高啊，宽啊，颜色之类的。

这里呢，还需要来一个框啊，就是边框。边框。边框的粗细、颜色，还有。嗯。放一差不多吧。

好，我们现在点一下保存。这个边框啊，就是这个小方块儿，我们可能准备存一个图标啊，就是一个放大镜之类的东西。在下面。是这个文字。我们也直接把它复制下来。然后一个大括号。这里面我对它的修饰。可以想一想，比如说这个字体的颜色，再比如说是字体的字号。对吧，那么我们我们可以调整一下。他。字体的颜色。字体要什么颜色好呢？因为你的背景已经是白色的了，对吧，那这个时候我们就不能是太浅的了，但是不能太灰灰色。

红色。这个颜色就差不多了啊，咱们暂时让他凑合一下，咱们点击一下保存。对吧，颜色变得浅了一点了。然后再来一个字体的大小，咱们给它整个小一点。Size对吧，这个是字体的大小。比如说来一个。实体叉。十以下呢，就跟他一样能保存。这好像太小了。哎，这个差不多吧，12叉。

再对比一下啊实体。好像是没有没有变化吧，我刷新一下。12叉。啊，好像是大了一点。那我们默认的是多大，我们来看一下，把它删除掉。啊，默认的是这么大。然后改成12K叉之后是这么的。差不多吧，啊，咱们就暂时留个12米，后期如果说觉得不好，咱们再调整再改。好，那下面呢，我们是希望让它在一行里边对吧，那么我们可以在这。加上一个对齐方式。

没有没有，我们手动写一下吧。啊有了，我打出个C就有了，比如说我们现在想让它居中对吧，然后保存一下。这个时候还没有显示，因为上面还少了一句。好，我们现在这个可以。好，我们现在呢，就已经实现了让它在同一行居中。

啊，那可能有些新手会问，诶老师，那第一行代码这是什么意思，这个是一个布局啊，一个弹性布局，我们可以看一下幻灯片呢，有一个简单的介绍啊，这是一种布局方式，可以用于容器中，也可以应用于行内元素啊，那么。你只要明白我们在对。刚才那种情况进行设置啊，进行一些样式设置的时候，可以把它带上就可以了。好，那我们现在呢，照葫芦画瓢对吧，我们学完了它的一个居中，那我们想把这个白色的，就是我们想把它当成那个搜索框的一个背景，也给它居中，对吧，你看现在它下面。是在顶部对吧，下面有这么大的一个红色，我们想让它往下挪一点，想它居中啊，这个该怎么显示。那么它的上级容器是不是就是这个红色的背景？

红色的背景是什么？就是我们这个搜索框啊，就是我们这个搜索框的上一圈就是它。这个导航，所以说呢，我们在这个导航下边可以来限制一下。之后也可以给它设置我们刚刚所显示的这些，比如说是居中显示。好的，我们现在保存一下。对吧，现在呢，他已经跑下面来了，但是诶，你会发现它这个下是下来了。现在我们有设置一个居中嘛，他已经跑到它的中间来了，但是呃，短了很多啊，还是不尽人意。

这样就是刚才是一个竖向居中，现在呢是一个横向的居中啊，它跑到中间来了之后呢，我们可以再给他一个边框啊。至于说这个长度大小啊，咱们一会儿再调。这里呢，我们可以写一个两个或者四个对吧，比如说。我们这有一个牛皮。

那么就意味着你上下左右全都是0P叉。懂吗？那么我们写一下保存。啊，现在呢，还是没有反应对吧。我们如果说。再加上一个像是。劈叉。然后再来保存。这个时候你就看到诶，它好像移动了一下，那么它呢，其实是可以有四个对吧，上右下左了，是这样的一个顺序。那么我们要是写四个是上右下左啊，我在看幻灯片里边也给大家进行了一个呃属性的介绍，然后举个例子啊，这样看着可能更加的直观。那么这个二呢，就是说这个东西距离上边框2cm，四呢，就是距离右边是4cm。

三呢是距离，下边是3C。四呢是距离左边的四次F，你就记住了这个顺序上右下左，这就跟这个钟表似的，对吧，钟表的顺时针啊，从零开始，零点三点六点九点，就这样的一个顺序啊距离。上边框距离右边框距离下边框距离左边框啊，这个就是关于开定的一个属性。好，那我们现在的眼目前要整的是它这个白的太小了，为什么？因为我们需要给它整一个宽度，肯定是我们刚才没有设置宽度。嗯，这个白色是。在这里面啊，我们是不是没有设置宽度啊，对吧，我们这里设置一个高，但是我没有设置宽啊，咱们加个宽。宽呢，假如说你整个百分百啊，我们保存一下。对吧，现在呢，就是有了它的长度是变了，但是呢，因为我们刚才设置的这个，呃。

移动啊，上边下边左边右边啊，所以说它会有一个偏差。

好，这样呢，就是。展现在其中了啊，那我们现在看大家就算是比较顺眼了。那么又有新生问啊，说这个borderer boos是什么意思？说如果咱们老百姓大牌话来说，就是把它装在盒子里边啊，让他。在这个框里头，那么咱们查一下。官方CSS一个说法是为元素设定的高度，宽度决定了元素的边框盒啊，就是我们说的盒子，就是它为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距，才能得到内容的宽度。高度啊，说起来有点绕口，你就简单的理解为就是加上了这个命令，那么下面这个东西它就在它里头。

就是这个意思就好了。好的，那现在呢，是一个矩形对吧，那么我们可以对它的边，就是这四个角给它磨一下，给它磨成一个圆弧啊，是支持这样直接整的。那么我们再转到40，在这里面给它加一加。这个就是那个圆弧啊。然后比如说我们来一个。我们看一下效果。对吧，现在是不是比之前好看一点了。

那么如果说我们也想给他调整一下，就是上下边框的这个距离，其实你现在也挺好看的，调不下都行了，那假如说我们想调一下的话，怎么调？你想调的是这个四火框啊，就是这个白色的这个东西对不对，那么我可以在这个里面。也加一个。对吧，咱们来一个15。试试看。是我太大了是吧？也不好，还不如刚开呢。那么这样写的话，它是上下左右都变成了十啊，我们这样写。

这样的话是上下是零，左右是十。诶，这样的话好像就更美观一些了啊，我们刚才调整一下，我们把它删除掉，然后大家对比一下看看区别。到一半是吧。这是没加上的啊，我们再来一个加上的。对吧，就是这个边框啊，会变了一点。其实你要不仔细看的区别其实不大。还是这样好一点，你看这个它这边还是就是这个方块啊，距离这个白色的还是要富裕出来一点，更好看一点啊。

咱们这个样式呢，到这里啊，就是说所见即所得的话，看着还行，可是呢，当你实际投入到使用的时候，你会发现还有很多的小的问题，你比如说呃，我们这样吧，咱们实际演示一下。咱们在。手这呢对吧，那我们在这里可以加上一些。嗯。

好，我们随便加上一些东西，然后现在点击保存。是吧，这里有了。可是当我们。不会看好就。可是当我们向下滑动的时候，你会发现，对吧？当我们内容足够多，当你往下滑的时候，它竟然没有没没没有固定到这里，对吧？我们希望的是这个东西它一直固定，结果这么一滑就把它给划没了。对不对，那我们想让它一直固定，该怎么实现？怎么让它固定啊，我们还得回到这边。对于它啊，我们应该加在。

加在最上面这一层。然后我们保存一下。对吧，这个时候你至少看着他已经，诶不会说。跟着你的滑动而滑动，对吧。然后呢，我们可以再增加一些向左向下向上的一些属性。这边我们。

对吧，这样呢，我们看起来就舒服一点了啊，它就不会再乱动了。那么又有一个。新的东西了啊，说这个东西它是什么意思啊，我们现在根据咱们刚才的实战说能控制它的位置，那我们查一下它的官方的详细说明，咱们看一下幻灯片。这个属性定义建立元素布局所用的定位机制，任何元素都可以定位。不过绝对。或固定元素会生成一个换机框，而不论该元素是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移。咱们呢，和。给它的值。是生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过就是上下左右对吧。进行规定，那么我们选择的就是它，给它一个绝对定位的值。

如果说还不理解，没关系，咱们现在讲的这些呢，就是说将来你想到诶，我想让他固定的时候，你再想到有一个这个命令，然后同时你将来看别人源码的时候，一看到它你能知道哦，这个东西是设置一下这个位置啊，距离上边的位置啊，距离左边的位置啊，这是一个写死的，这是一个固定的啊，你要知道这些就可以。然后呢，我们还可以给他一个叠加次序的。排序啊，那这个z inex。它后面我写了一个99，基本上可以说它就是最高级了，那这个东西是什么意思啊，我们来看一下幻灯片。属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，也就是说你有多个元素，假如他们有交集的时候，那么谁的。

这个堆叠元素这个序号高。对吧，谁的高它就会展示它最前面你给了他一个99，这已经是很高了，对吧，比如说其他你来个9897不会在他下面啊。那这样的话，我们基本上就就说这东西妥妥的，它是最高的了。既固定钱最高啊。但是到这里呢，其实还有一个问题啊，你虽然说肉眼看着没有没有什么异常，但是实际上是有的，就是。它在它的上面，也就是说把后面的一些东西给遮住了，对不对，那我们都写QQQ才能看的不全，我们写一个，比如说一。二。三。

五然后我们现在给你保存。对吧，你会发现他从三开始了。并不是说一跟二在这里边没有，只不过一一跟二在哪呢？一在这呢，二在这呢，被它给挡住了，对不对，那这个时候我们想让它整整体的信息都能显示出来，怎么办啊，我们呢，可以在这加上一个占位图，就是把这个位置我给你占上去。对吧。那这个时候啊，我们在哪个文件里面进行写呢。在这里吧，然后比如说。我们在这儿可以直接来一个有。嗯，因为我们现在只需要设置一个高度，所以说咱们就不整拉了，白占地。

再来一个。看这样更简单一点，然后高度三个高度，比如说这刚才设置多少了，是45。咱们写一个45好，然后我们试一下保存。结果呢，你会发现，诶没有显示没有变化对不对，为什么。为什么？因为他和他同在它的里边。对吧，所以呢，我们可以把它。再给它缩小一点。咱们在这啊，新建一个。

之后咱们对这个类进行一个定义。那么我们还是希望它能够固定在上面对吧，然后我们希望它能够跟随上面是固定的。这块啊，我们是想让他。固定对吧。之后啊，咱们。这块不是说固定的吗，我们把你这些东西全都复制过来啊对好了这个。全都放在。

不要不要弄错这个符号。他他他他没错。然后我们粘贴一下，大家保存。这个时候。就完全符合我们的要求了，首先上面的是不动的，你滑动它不会动，其次这个东西123完整显示，不会被它遮挡住，对吧，所以说呢，这个还是需要注意一下的。那么我们再回顾一下啊，说咱们为什么要把它放在一个啊负元素里面啊，就是你想啊，这个东西如果说像我们改之前，他跟他是在一块儿的，对不对，那那在一块的话，要划都划，要挡都挡，要固定都固定对不对，咱们现在呢，就给它拆开了，这个东西咱们没有对他做任何的一个。

下面的class的限制对吧，咱们这些class全都是对这里边儿的这些东西整的。这样呢，我们就不用担心它和它有一个重复了，说像我们改之前，那就是因为你都在同一个类里边，所以说你要变都变，要不变都不变，你要固定都固定，要不固定都都不固定，对吧？那我们现在拆一下，那么就是下面的。可以正常的滚动，而且不不会被上面的挡住啊，上面的固定对吧。好的，那么截止到这里呢，咱们对于。

在APP中的导航栏啊，就是顶部这个标题栏已经找的差不多了啊。大家写一下吧。但是还没完对吧，咱们目前只把APP的弄完了，但是小程序里面的还不行，咱们这个程序做好之后呢，目标是一套源码多端显示，对吧，你在APP里边是它在小程序里面就不一定还跟它一模一样了，为什么咱们调试一下啊。现在启动一下微信开发者工具。

好的，然后我们在这边调试一下啊，这个还是之前的，之前的那个。我们回到这边。我们现在运行。在微信开发者工具。正在编译之中啊，稍等一下。后面这个我们就把它关掉，这个没有用了，我们看前面这就可以了，这个时候呢，你会发现诶我们在APP里面显示是OK的，可是在小程序里面就不OK了，为什么它顶部在这个位置，它有一个点点点点点这个就信号啊，还有这个时间，还有这个电池电量，这个东西挺占地儿的，对不对，非常影响美观，那我们应该如何处理这个问题呢？