一、视图容器

1、view

普通视图容器，相当于HTML中的div，可以包裹多种元素内容

2、scroll-view

可滚动视图区域，可以横向滚动和纵向滚动，一般用于区域滚动，简单来说就是有限的页面，无法展示我们的全部需求，所以需要滚动来展示更多。（例如下拉触底刷新的功能）

常用属性说明：

scroll-x 允许横向滚动

scroll-y 允许纵向滚动

upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件

3、swiper

滑动视图容器
一般用于左右滑动，例如轮播图

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

常用属性说明：

autoplay：是否自动播放，默认为false。
interval：自动播放的时间间隔，单位为毫秒，默认为5000。
duration：滑动动画的时长，单位为毫秒，默认为500。
circular：是否采用衔接滑动，默认为false。
indicator-dots：是否显示指示点，默认为false。
indicator-color：指示点颜色。
indicator-active-color：当前选中的指示点颜色。
vertical：是否为纵向滑动，默认为false。可以在swiper组件中添加以上属性

用法介绍：

<swiper autoplay="true" interval="3000" circular="true" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#ff0000">
  <swiper-item>
    <!-- 这里是轮播图的内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 这里是轮播图的内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 这里是轮播图的内容 -->
  </swiper-item>
</swiper>

二、基础内容

1、text

Text组件用于显示静态文本内容，其基本用法非常简单。

text组件在web浏览器渲染（含浏览器、小程序webview渲染模式、app-vue）和uvue中，可以并只能嵌套text组件

常用属性介绍：

color: 设置文本颜色，可以接受CSS颜色值或预定义的颜色名称。
font-size: 设置文本的字体大小。
font-weight: 设置文本的字体粗细。
text-align: 设置文本的对齐方式，可选值包括"left"、“right”、"center"等。
text-decoration: 设置文本的装饰效果，如下划线、删除线等。
在里面也可以使用插槽来展示文本 <text>{{ message }}</text>

三、表单组件

以下的一些组件都是在Vue中学习过的，只是增加了一些特性，就不做详细介绍了

1、button

按钮组件，用于触发一个操作

按钮支持 default、primary、info、warning、danger、success 六种类型，默认为 default。

<template>
  <nut-button type="primary">主要按钮</nut-button>
  <nut-button type="info">信息按钮</nut-button>
  <nut-button type="default">默认按钮</nut-button>
  <nut-button type="danger">危险按钮</nut-button>
  <nut-button type="warning">警告按钮</nut-button>
  <nut-button type="success">成功按钮</nut-button>
</template>

常用属性说明：

size 按钮的大小

type 按钮的样式类型

aisabled 按钮是否禁用

2、checkbox 多选框

3、editor 富文本编辑器

4、form 表单域

5、input 输入框

6、label
用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

7、radio 单选框

8、slider 滑动选择器

9、switch 开关选择器

10、textarea 文本域

四、路由跳转

1、navigator

该组件类似HTML中的<a>组件，但只能跳转本地页面。

常用属性说明：

跳转方式： open-type=
默认方式 navigate 新页面
redirect 当前页面打开
switchTab 跳转到Tab页面打开

<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
    <button type="default">跳转到新页面</button>
</navigator>

<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
    <button type="default">在当前页打开</button>
</navigator>

<navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
    <button type="default">跳转tab页面</button>
</navigator>

2、navigateTo

利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

go () {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}