view组件就类似于html中的div标签
list.wxml
<view class="container1">
<view>Aview>
<view>Bview>
<view>Cview>
view>
list.wxss
.container1 view{
width:100px;
height:100px;
line-height:100px;
text-align:center;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightblue;
}
.container1 view:nth-child(3){
background-color: lightcoral;
}
.container1{
display: flex;
justify-content: space-around;
}
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。
list.wxml
<scroll-view class="container" scroll-y>
<view>Aview>
<view>Bview>
<view>Cview>
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: lightcoral;
}
.container1{
justify-content: space-around;
height: 150px;
width: 100px;
border: 1px solid red;
}
swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。
其中swiper组件中的indicator-dots属性为是否在轮播图面板上显示指示点，若想显示，那么将其indicator-dots属性设置为true.
list.wxml
<swiper class="swiper-container" indicator-dots="true">
<swiper-item>
<view class="item">Aview>
swiper-item>
<swiper-item>
<view class="item">Bview>
swiper-item>
<swiper-item>
<view class="item">Cview>
swiper-item>
swiper>
list.wxss
/* pages/list/list.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 150px;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1){
background-color: lightgreen;
}
swiper-item:nth-child(2){
background-color: lightpink;
}
swiper-item:nth-child(3){
background-color: lightcoral;
}
官网地址【swiper组件】
text为文本组件，类似于html中的span标签，也是一个行内元素
text组件一个常用的功能 ：长按选中功能（text组件的selectbale属性）
list.wxml
<view>
微信号:
<text selectable>robin_zhtext>
view>
rich-text 组件为富文本组件，它可以通过nodes属性将HTML字符串渲染为wxml结构
<rich-text nodes="HTML字符串
">rich-text>
button组件，微信小程序为其提供了诸多属性，type ,size,plain…，同时button组件可以通过open-type属性调用微信提供的各种功能（客服，转发，获取用户权限，信息等）
<view>=====1.普通按钮，通过type来指定颜色======view>
<button>默认按钮button>
<button type="primary">主色调按钮button>
<button type="warn">警告按钮button>
<view>=====2.迷你按钮，通过size来指定尺寸======view>
<button size="mini">默认按钮button>
<button size="mini" type="primary">主色调按钮button>
<button size="mini" type="warn">警告按钮button>
<view>======3.镂空按钮，通过plain指定镂空======view>
<button plain>默认按钮button>
<button type="primary" plain>主色调按钮button>
<button type="warn" plain>警告按钮button>
image组件就和html中的img标签是完全一样的，只不过在微信小程序中的image组件即使没有图片也会默认占据一部分位置（大约300px*240px）
<image/>
<image src="./kl.jpg" />
/* pages/list/list.wxss */
image{
border: 1px solid red;
margin-bottom: 4px;
}
image组件的mode属性用来指定图片的裁剪和缩放模式
mode属性的默认值为scaleToFill,不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
mode属性值的说明:
| 合法值 | 说明 |
|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
