微信小程序教程入门篇 (4):高仿一个漂亮的手机界面-极其详细-partB

本篇是接着上一篇写的,上一篇制作了个头部,就那么一点点的东西,熊熊觉得有点少,本篇给大家写一写tab部分并且呢实现tab切换,哎呀,是不是很激动啊!

如果你是个微信小程序小白,白的不行的那种。那我强烈建议你看看我前三篇文章,这样你至少能够自己写出一个hello world的demo,再看这篇文章就容易很多啦。下面是这三篇文章:《微信小程序教程入门篇 (1):10分钟从0开始写一个hello world,极其详细》《微信小程序教程入门篇 (2):给hello world一点颜色瞧瞧-最后有彩蛋-极其详细》《微信小程序教程入门篇 (3):高仿一个漂亮的手机界面-极其详细-partA》。

好啦,话不多说,直接进入正文:

先来看下我们现在要高仿的内容,图1中的红框标出的2部分

图1:

先分析下tab栏部分,tab栏包括4个子tab,每个tab里都写有文字,并且点击的时候,字体颜色变粉红,然后字体下面多了一条粉红色的粗线。好吧,我想说的是实现这个tab栏有很多种思路,条条大路通罗马嘛,只是思路不同具体写的代码不同而已。今天我介绍两种思路吧,先来说说大家第一印象的思路,比较中规中矩的思路,也就是说大家第一眼看到的时候想到的一个思路,第一种思路要用到两个组件view和text。

介绍第一种思路之前,先普及小程序的知识。view是什么呢?其实,就是一个容器,具体的我在第3篇说过了,不懂的自己去看哦!text就是微信小程序专门为文字做的一个组件了,看组件的名字其实也能明白,text就是文本的意思嘛。如果你学过html,那么text就类似于html中的span。单纯的从结构上看,本篇的tab栏,其实就是一个容器里包含了4组文字。这是仿站的一个思路,就是先抛开样式,看结构,先做出结构,样式最后调。好了,一个view里包括4个text,直接上代码:

<view>

<text>首页</text>

<text>0-1岁</text>

<text>2-6岁</text>

<text>7-12岁</text>

</view>

显示效果如图2:

可以看到文字都已经显示出来了,但是现在因为没有样式所以非常的不好看,接下来就是调样式的时间了,调样式也分两步,第一步先排列整齐,不加颜色和粉红色的粗线,第二步加颜色和粉红色的粗线。用class给组件加样式是我非常习惯和推崇的一种方式,我不喜欢用id,因为html规范中一个页面只能出现唯一的一个id,也就是说id是不能重复使用的,不能说这个组件id我设置为“idaa”,下一个组件的id我还设置为“idaa”,这样做虽然不会报错,但是不符合标准,所以不推荐大家这么干,大家可以向我一样用class给组件加样式,class是可以复用的,这是个好的习惯(PS:如果不明白什么叫“id、class给组件加样式”,去看我写的第二篇教程)。

好了废话说完了,继续我们的代码,我们给view增加class属性,属性名就叫“tabs”好了,然后我们用上一篇提到的那个faststone测量工具,测出来原图中的子tab的数据如下:每个子tab宽是25%,高度是37px,字体大小是13px,字体水平居中显示。

如图3:

好了知道这些以后就能编写wxss代码了,嗖嗖嗖,瞬间就编写完了奉上代码:

.tabs text{

width:25%;

height:37px;

font-size:13px;

text-align:center;

}

然后看下效果图,如图4:

图中可以看出来,宽度好像没有起作用,每个子tab并没有分配25%的宽度,还是挤在一起。这是为什么呢?这就涉及到行内组件和块级组件的区别了,这两种组件如果纯介绍概念不太好讲,本篇也不想展开讲,它跟html中的行内元素和块级元素是一样的。求知欲强的同学可以百度下行内元素和块级元素的区别,如果不想百度,那么你只需要知道行内组件就是不会自动换行,不能设置宽高;而块级组件会自动换行,并且可以设置宽高并且两者可以互相转换的就行了。本篇用到的text就属于行内组件,别问为什么,这就跟你叫小明是一样的,龟腚!!!所以text是不能设置宽高的,但是刚刚说了行内和块级是可以互转的,所以我们把text转为块级的就行了啊!没错,互转用到的css样式是display,display都好几种值,本篇只介绍三种常用的:block:块级,inline:行内,inline-block:行内块级。block和inline就不说了,inline-block是什么鬼!!先别懵逼。inline-block看字面意思,就是行内的块级元素,这是为了弥补行内和块级的缺点而出现的一个非常人性化的形式。inline-block组件既不会换行而且可以设置宽高。什么意思呢,做个测试就明白了:

我们先把display设置为block,代码如下:

效果如下,图5:

每个子tab都换行了,显然不是我们想要的,我们想要的是既不换行又能设置宽高的,这个时候inline-block就有用了,上代码:

.tabs text{

width:25%;

height: 37px;

font-size:13px;

text-align: center;

display:inline-block;

}

看图6:

这些看起来舒服很多,距离我们的目标越来越近了。

还是解释下“.tabs text”的意思吧,这个叫做选择器,如果你不懂什么叫选择器,那你想叫什么就叫什么吧!我第二篇介绍过1级选择器,这里出现的是2级选择器,也可以理解为父子关系,本篇中“.tabs text”表示class为tabs的组件内的所有text组件。也就是内的所有的。所以“.tabs text{...}”就相当于给内的所有的设置相同的样式。除了2级也可以有3级,4级...等等,每一级之间用空格隔开。这里如果你不想用2级这种形式,也可以给每一个text设置class来实现,是一样的,比如给每一个text设置class="tabsitem":

index.wxml:

<view>

<text class="tabsitem">首页</text>

<text class="tabsitem">0-1岁</text>

<text class="tabsitem">2-6岁</text>

<text class="tabsitem">7-12岁</text>

</view>

index.wxss:

.tabsitem{

width:25%;

height: 37px;

font-size:13px;

text-align: center;

display:inline-block;

}

这样也是可以的,但是这样写代码就不简洁了,而且也不利于日后维护(你可以想象如果以后有1000个text呢),一个好的编写习惯就是用最少的代码实现你想要的。所以我推荐大家都使用2级选择器的形式。

回到正题,现在我们调样式的第一步已经完成,开始做第二步了,就是加上粉红色和粉红色的粗线。通过测量,粉红色的颜色代码为#FE4C5B;粗线为4px粗;但是这里有个问题是,只有当我切换的时候,才会出现颜色和粗线。所以这里,我们就要用到一个新的知识了,先上代码吧和效果图吧;

.tabs text:hover{

color:red;

border-bottom:4px solid red;

}

效果如下,图7:

现在看到可以切换了,切换以后已经有了颜色和粗线。解释下代码“:hover”,这其实是伪类,你不需要知道伪类的概念,只要知道什么属于伪类就好了,:hover就是伪类之一,语法就是selecter:hover,selecter是选择器,就是上文中的“.tabs text”,中间用“:”号连接。它的作用类似css中伪类的作用,但是不完全一样,css中的:hover是当鼠标悬停在选择器上面的时候触发。而在wxss中表示,当我们点击了选择器以后触发,如果我们这个时候点击了其他的地方,那么这个触发就消失了。所以在本篇中,当我们点击了子tab以后,触发了hover,此时这个子tab的样式会按照我们设置的hover的样式显示,也就是会变粉红色和粉红色的粗线。而当我们点击了其他地方以后,此时我们离开了原来的子tab,那么它又就会按照正常的样式去显示。因此,这里会有两个问题存在,第一个是当我们第一次打开这个页面的时候,tab栏里的第一个子tab并不会默认就显示粉红色和粗线,因为我们没有点击,只有点击才会变;第二个问题是,当我们点击了以后,子tab变粉红和粗线,如果我们又点击页面其他的地方,它又变回去了,也就是说不能保留变化。看到这,不知道你有没有懵逼,我觉得有点绕,可能真正动手实验一下会理解的更好,大家能理解多少就理解多少吧!!!这是纯wxss实现tab切换的缺点之一,如果想要解决以上出现的两个缺点,那就需要用到js+wxss或者更加繁琐的input+:checked方式了,那属于高级应用了,以后单独开一篇讲喽!!!

第一种思路终于介绍完了,居然写了这么字,是不是看不下去了?没关系,如果我告诉你,第二种思路是黑科技呢,你去微信小程序官方手册上都找不到第二种的所用到的任何代码。刚才预览了下,发现本篇写了这么字了,算了,下一篇再介绍第二种思路吧!!

后续的教程我会更新到我的个人公众号上,公众号上我也会录制视频课、直播课以及组织问答群。微信搜索“pietian或者扫描下方二维码:

严正声明:

联系原文作者可登陆www.pietian.com与作者交流。

原文链接:http://www.pietian.com/article/7

未经作者同意,谢绝及禁止任何形式转载,作者保留所有法律权限。

推荐阅读更多精彩内容