day01 | view & scroll-view

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;
}

注解：

1. text-align: center; -->文本水平居中

2. line-height: 100px; --> 用于对网页文字及其他元素设置行高，由于会影响元素高度，也可用于调节一些元素的高度

3. display: flex; --> 弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性

4. justify-content: space-around; --> 每个项目两侧的间隔相等

view效果图

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纵向效果图