P8_组件-view和scroll-view组件的基本用法

组件

1. 小程序中组件的分类
   
   小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：
   1. 视图容器
   2. 基础内容
   3. 表单组件
   4. 导航组件
   5. 媒体组件
   6. map 地图组件
   7. canvas 画布组件
   8. 开放能力
   9. 无障碍访问
2. 常用的视图容器类组件
   1. view
      • 普通视图区域
      • 类似于 HTML 中的 div，是一个块级元素
      • 常用来实现页面的布局效果
   2. scroll-view
      • 可滚动的视图区域
      • 常用来实现滚动列表效果
   3. swiper 和 swiper-item
      • 轮播图容器组件 和 轮播图 item 组件
3. view 组件的基本使用
   
   实现如图的 flex 横向布局效果：
   
   

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:lightskyblue;
}
.container1 view:nth-child(3) {
background-color:lightcoral;
}
.container1 {
display: flex;
justify-content: space-around;
}

1. 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:lightskyblue;
}
.container1 view:nth-child(3) {
background-color:lightcoral;
}
.container1 {
border: 1px solid red;
height: 120px;
width: 100px;
}