导读

经过这段时间的学习，大家都学得怎么样了？

为了帮助大家梳理内容，我这次将之前的内容梳理一遍，看看大家有没有遗忘的。

属性类

<image>组件属性（图片）

• src

属性意思：这个属性可以调用本地图片和站外图片。

• mode

属性意思：可以对图片设置不同的缩放格式。

部分合法值介绍

scaleToFill

这个合法值倒不必说了，系统默认的就是这个，他的意思就是让图片完全填满，不是很建议使用的，是比较懒的一种合法值。（用的最少，会压缩）

aspectFit

这个合法值也是缩放，但是他是有规矩的缩放，保留一定的比例，比方说你是图片是9X16的，他缩放也是9X16，这个还是可以的。（按照长边来缩放）

aspectFill

这个合法值类似于上一个，但是不完全一样，这个合法值是宽为比例，可能保留了宽，你的高也会因而受到限制。（可能会被裁剪）

widthFix

宽度不变，高度自动变化，保证原图的大小。（比较好的方法之一）

• lazy-load

属性意思：这个属性是懒加载，需要借助js来完成，用户在看图片的时候需要加载几张图片之后才会出现这个图片。

• show-menu-by-longpress

属性意思：可长按识别二维码

<scroll-view>组件属性（可滚动的导航）

• scroll-x

属性意思：横向滚动，横向滚动条

• scoll-y

属性意思：竖向滚动，竖向滚动条

• upper-threshold和lower-threshold

属性意思：拖动时候触发事件（需要结合外部框架来实现）

• scroll-top和scroll-left

属性意思：滚动条的初始位置，scroll-top是竖着规范，scroll-left是横着规范

• scroll-with-animation

属性意思：滚动条的动画效果。不会生硬的滚动。

<swiper>组件属性（轮播图）

<swiper-item>组件

这两个组件需要放到一块使用。

• indicator-dots

我们平常要能看到轮播图里面有几张图片的时候，就需要用到这个属性

属性意思：显示指示点

• indicator-color=“（255,255,255，0.6）"

属性意思：调整指示点的颜色

• indicator-active-color=“#fff"

属性意思：调整指示点的颜色

• indicator-active-color=“#fff”

属性意思：调整被选中的指示点颜色

• autoplay

属性意思：让轮播图自己切换

• interval=“5000”

默认是5000毫秒，我们可以修改的更长或更短，单位是毫秒

属性意思：设置轮播图自动切换的时间

• current=“1”

默认的第一张图片“0”，第二张图片的“1”，以此类推

属性意思：设置首图为哪一张图片

• duration=“500”

默认是500毫秒，可以修改时间的长短，单位是毫秒

属性意思：调整切换时间的动画长短

• circular

属性意思：到最后一张图片后，再拖动，会自动衔接到第一张图

• vertical

属性意思：纵向拉动，类似于邀请函的上下拉动

• previous-margin=“10”

属性意思：轮播图左边10像素间隙

• next-margin=“10”

属性意思：轮播图右边10像素间隙

• display-multiple-items="2"

属性意思：设置同时显示的滑块数量

• easing-function

属性：设置轮播图的动画效果

这是这个属性的一些合法值：

1. default：默认缓动函数
2. linear：线性动画（匀速）
3. easeInCubic：缓入动画（先慢最后快）
4. easeOutCubic：缓出动画（先快最后慢）
5. easeInOutCubic：缓入缓出动画（开头结尾慢，中间快）

基础内容组件

<icon>组件属性

• type="info"

属性意思：类型，可以有多个图标进行设置

1. success（勾）
2. success_no_circle（没有外框的勾）
3. info（感叹号）
4. warn（警告）
5. waiting（等待）
6. cancel（取消）
7. download（下载）
8. search（搜索）
9. clear（清除）

• size=“90”

属性意思：尺寸，大小，我们可以根据需要设置大小

• color=“pink”

属性意思：设置图标的颜色

<progress>组件属性

• percent=“90”

属性意思：设置进度条的落脚点

• show-info

属性意思：让进度条的位置以百分比的方式显示出来

• bord-radius="5"

属性意思：为进度条设置一个圆角度为5的圆角

• font-size

属性意思：进度条右边字体的大小，默认是16

• stroke-width

属性意思：进度条的粗细

• backgroundColor=“pink”

属性意思：未读取部分进度条的颜色

• activeColor="blue"

属性意思：被选中的进度条颜色

• active

属性意思：进度条的缓冲动画效果

• active-mode

属性意思：接着上次的断点继续加载

• duration

属性意思：调整每1%进度条的时间，单位是毫秒，默认是30

rich-text

• nodes

属性意思：富文本组件，这里面可以放上HTML代码，实现HTML代码的一些效果

• space

属性意思：实现连续空格

样式类

.out image{}

这里的out指的是调用out下的图片属性，这里可以放一些元素来控制图片的大小和方位。

.out .box{}

这个意思是调用.out下面的.box属性，对了，这两个之间需要空一格。

靠边样式

float: left（释义：几张图片放到一排去）

排版样式

display: inline-block;（释义：一堆块文本横着排，如果排不下换行）

white-space: nowrap;（释义：有多少排多少，放到一行去，不换行）

图片加上间隙（左右）

padding: 0 5px;（释义：5像素大小的间隙，在左边）

box-sizing:border-box;（释义：向逆填充，上面的左边，这里就是右边）