“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情”

1.小程序的宿主环境---组件

1.小程序中组件的分类

小程序中的组件也是由宿主环境提供的：

1. 视图容器

2. 基础内容

3. 表单组件

4. 导航组件

媒体组件
map地图组件
canvas画布组件
开放能力
无障碍组件

2.常用的视图容器类组件

view

普通视图区域
类似于HTML中的div,是一个块级元素
常用来实现页面的布局效果

scroll-view

可滚动的视图区域
常用来实现滚动列表效果

swiper和swiper-item

轮播图容器组件和轮播图item组件

3.view组件的基本使用

实现如下图的横向布局的效果：

代码如下：

<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

如果想在list文件夹下写一个样式：

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

给上面写的三个view模块分别加上背景色：

.container1 view:nth-child(1){
  background-color: red;
}

.container1 view:nth-child(2){
  background-color: springgreen;
}


.container1 view:nth-child(3){
  background-color: violet;
}

效果图如下所示：

加上如下的样式：

display:flex 横向排布 justify-content: space-around;分散排布

.container1{
  display: flex;
  justify-content: space-around;
}

效果图如下所示：

4.scroll-view组件的基本使用

我们想要实现下面滚动的效果：
注意：

scroll-x属性：允许横向滚动
scroll-y属性：允许纵向滚动
注意如果使用竖向滚动，必须给scroll-view一个固定的高度

根据上面的结构改一下，将view改成scroll-view

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

样式如下：

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}


.container1 view:nth-child(1){
  background-color: red;
}

.container1 view:nth-child(2){
  background-color: springgreen;
}


.container1 view:nth-child(3){
  background-color: violet;
}

.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}