view
普通视图区域
类似于HTML 中的 div,是一个块级元素
常用来实现页面的布局效果
list.wxml
<!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
list.wxss
/* pages/list/list.wxss */
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightblue;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
.container1 {
display: flex;
justify-content: space-around;
}
注解:
text-align: center; -->文本水平居中
![](https://i-blog.csdnimg.cn/blog_migrate/68ae6be610e3575862e15fab451de892.jpeg)
line-height: 100px; --> 用于对网页文字及其他元素设置行高,由于会影响元素高度,也可用于调节一些元素的高度
![](https://i-blog.csdnimg.cn/blog_migrate/0f3afb2d6d513be0dc0471f70c7adc32.jpeg)
display: flex; --> 弹性布局,它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性
![](https://i-blog.csdnimg.cn/blog_migrate/0c72525fd2b23251b5d8d6f6fd22de00.jpeg)
justify-content: space-around; --> 每个项目两侧的间隔相等
![](https://i-blog.csdnimg.cn/blog_migrate/a97e24a739108a84f9b76305dbc401a1.jpeg)
view效果图
![](https://i-blog.csdnimg.cn/blog_migrate/e5e2b3b3b1f8061c178badba7c806744.jpeg)
scroll-view
可滚动的视图区域
常用来实现滚动列表效果
list.wxml
纵向轮播
<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
list.wxss
/* pages/list/list.wxss */
.container1 view {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightblue;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
.container1 {
border: 1px solid red;
width: 100px;
height: 120px;
}
scroll-view纵向效果图
![](https://i-blog.csdnimg.cn/blog_migrate/51e8b8818129547c40810c7beed2d4ad.gif)