微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image

1. view组件

view组件就类似于html中的div标签

list.wxml

<view class="container1">  <view>A</view>  <view>B</view>  <view>C</view></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;}

2. scroll-view 组件

scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。

list.wxml

<scroll-view class="container" 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: lightcoral;}.container1{  justify-content: space-around;  height: 150px;  width: 100px;  border: 1px solid red;}

3. swiper 和 swiper-item 组件

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">A</view>  </swiper-item>  <swiper-item>    <view class="item">B</view>  </swiper-item>  <swiper-item>    <view class="item">C</view>  </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;}

3.1. swiper组件中的常用属性

官网地址【swiper组件】

4. text 和 rich-text组件

4.1. text组件

text为文本组件，类似于html中的span标签，也是一个行内元素

text组件一个常用的功能 ：长按选中功能（text组件的selectbale属性）

list.wxml

<view>  微信号:  <text selectable>robin_zh</text></view>

4.2. rich-text 组件

rich-text 组件为富文本组件，它可以通过nodes属性将HTML字符串渲染为wxml结构

<rich-text nodes="<h1>HTML字符串</h1>"></rich-text>

5. button 组件

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>

6. image组件

image组件就和html中的img标签是完全一样的，只不过在微信小程序中的image组件即使没有图片也会默认占据一部分位置（大约300px*240px）

<image/><image src="./kl.jpg" />

/* pages/list/list.wxss */image{  border: 1px solid red;  margin-bottom: 4px;}

6.1. image的mode属性

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	裁剪模式，不缩放图片，只显示图片的右下边区域

---