在各种组件中,有一类特殊的组件,它们主要用于决定其他组件显示在哪里,我们称这类组件为“视图容器”。我们在Hello World项目中曾使用过的view组件就是视图容器。
view组件非常类似于HTML中的div。我们首先通过一个例子来了解一下view组件的用法。
要了解view组件的用法,请访问右侧二维码。
Hello World项目
在上面的视频中,我们将index.wxml中的内容替换 为:
<!-- index.wxml --> <view> <view> <view>Lorem Ipsum</view> <view>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</view> <view>Ut enim ad minim veniam</view> </view> </view>
这组view组件的显示效果如图2-1所示。
图2-1 view组件的显示效果
这与我们在第1章看到的view组件没有什么区别。为了“决定其他组件显示在哪里”,我们还需要使用WXSS。首先,我们为这组view组件添加class属性:
<view class="contentBlock"> <view class="contentHeader">Lorem Ipsum</view> <view class="content">Lorem ipsum dolor ... <view class="contentFooter">Ut enim ... </view>
有了class属性之后,我们就可以使用WXSS文件来设置view组件的样式了。首先,我们为最外层的view组件,也就是为class="contentBlock"的view组件设置样式。我们将index.wxss中的内容替换为:
/* index.wxss */ .contentBlock { background-color: #00000066; color: #ffffff; }
在上面的代码中,.contentBlock表示我们要为WXML文件中class="contentBlock"的组件设置样式。接下来的部分用“英语”来理解就可以了。background-color表示背景色,color表示颜色。
#ffffff和#00000066是RGB颜色。#ffffff代表白色,#000000代表黑色。#00000066的最后两位66,代表透明度。因此,#00000066代表颜色为半透明的黑色。
我们不会过多地介绍RGB颜色。事实上,RGB颜色是非常简单的。你可以从W3School了解到关于RGB颜色的更多内容。
现在view组件的显示效果如图2-2所示。
图2-2 设置了背景色和颜色之后的显示效果
效果看起来好一点了,不过我们还是能发现很多问题:
(1)我们希望文字不要紧贴着边框,这会给人很强的压迫感;
(2)我们希望第一行文字充当标题,因此它的字号应该大一些,并且居中显示;
(3)我们希望最后一行文字充当页脚,因此它的背景色应该比其他部分更深一点。
要解决第一个问题,我们需要为contentHeader、content以及contentFooter添加衬距:
.contentHeader, .content, .contentFooter { padding: 16rpx; }
在上面的代码中,我们使用逗号来分隔不同的class,并将它们的衬距统一设置为16rpx,rpx是微信小程序中的尺寸单位。现在,文字就不会紧贴着边框了,此时view组件显示效果如图2-3所示。
图2-3 设置了衬距之后的显示效果
接下来,我们设置contentHeader的样式:
.contentHeader { font-size: x-large; text-align: center; }
上面这段代码用“英语”就能很容易地理解,font-size 表示字号,x-large 为特大,text-align表示文本对齐,center为居中。这段代码实现的效果如图2-4所示。
图2-4 设置了字号和文本对齐之后的显示效果
最后,我们设置contentFooter的样式:
.contentFooter { background-color: #00000066; }
上面这段代码将 contentFooter 的背景色设置成了半透明的黑色。由于 contentFooter 位于contentBlock之内,并且contentBlock的背景色也是半透明的黑色,因此它们的背景色会发生叠加,显示效果如图2-5所示。
图2-5 背景色叠加后的显示效果
正如名字所说的那样,视图容器的主要功能是作为“容器”来“放置”其他组件。将视图容器与WXSS相结合,我们就能够决定其他组件的显示位置了。当然,由于WXSS的功能非常强大,我们还可以通过WXSS来设置视图容器及其所容纳的组件的字号、背景色等样式。
当然,视图容器和WXSS的功能还远不止这些。不过,为了防止读者过深地“陷入”细节,我们对视图容器和 WXSS 的介绍就告一段落。在后面的章节中,我们还会多次使用视图容器和WXSS,并不断地介绍关于它们的新知识。
要了解更多的视图容器组件,请访问微信官方文档。