Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

当设置后，继续给view等容器组件设置，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局, 因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。

1. scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变
2. 可滚动视图区域。用于区域滚动。
3. 需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

自定义下拉刷新

• 注意，在webview渲染时，自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。

实现思路：
第一步，在pages.json中配置该页面，允许进行下拉刷新
第二步，在下拉刷新的生命周期函数中，处理逻辑

1. 在pages.json中配置该页面，允许进行下拉刷新

2. 在下拉刷新的生命周期函数中，处理逻辑

滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。

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

uniapp中自带的icon很少，不管哪个UI框架都有这个问题，最好就是引用来自iconfont之类的自定义项目文件，我见过很多项目是将文件直接下载下来使用，弊端是操作麻烦，颜色不可修改，只能用已下载的颜色，最好的方式当然是使用字体文件来实现，这里就详细说下操作流程

方案步骤
步骤主要分两块，一块是iconfont上的项目管理，一块是本地uniapp项目中的配置

iconfont端
iconfont端主要分3步：

2. 创建项目



4. 选择图标



6. 导出字体文件

项目端引用

项目端引用主要分3步:

4. 文件下载

5. CSS引用
   然后进入到App.vue中的style进行CSS引用

6. CSS引用路径修改

这里是个小坑，因为默认网页中css引用当前文件夹下的字体文件是没问题的，但是在uniapp中需要去修改iconfont.css中的引用字体的文件位置

改为如下（记得按你自己的路径来修改）

至此就可以在前端进行引用了，eg:

文本组件。用于包裹文本内容。

• 支持 方式换行。

富文本。支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

• nodes 不推荐使用 String 类型，性能会有所下降。
• rich-text 组件内屏蔽所有节点的事件。所以如果内容中有链接、图片需要点击，则不能使用rich-text
• attrs 属性不支持 id ，支持 class

进度条。

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

多项选择器，内部由多个 checkbox 组成。

富文本编辑器，可以对图片、文字格式进行编辑和混排。

表单，将组件内的用户输入的 提交。

当点击 > 表单中 formType 为 submit 的 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

解读一下代码：

为方便做表单验证，uni ui提供了组件，参考：https://ext.dcloud.net.cn/plugin?id=2773

uni-app的内置组件已经有了 组件，用于提交表单内容。

然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，uni-ui 又基于 组件封装了 组件，内置了表单验证功能。

提供了 rules属性来描述校验规则、子组件来包裹具体的表单项，以及给原生或三方组件提供了 onFieldChange() 来校验表单值。

每个要校验的表单项，不管input还是checkbox，都必须放在组件中，且一个组件只能放置一个表单项。

组件内部预留了显示error message的区域，默认是在表单项的底部。

另外，组件下面的各个表单项，可以通过包裹为不同的分组。同一下的不同表单项目将聚拢在一起，同其他group保持垂直间距。仅影响视觉效果。

基本用法

uni-forms 组件通常用来做表单校验和提交。每一个 uni-forms-item 是它的一个表单域组件，用来承载表单具体内容，uni-forms-item 中可以嵌套 uni-easyinput、uni-data-checkbox 和 uni-app 内置的表单组件。

对齐方式
使用 label-position 属性可以设置所有表单域的位置，默认在左侧

表单校验

1. uni-forms 需要通过 rules 属性传入约定的校验规则，详细描述下文校验规则说明。

2. uni-forms 需要绑定model属性，值为表单的 keyvalue 组成的对象。

3. uni-forms-item 需要设置 name 属性为当前字段名，字段为 String|Array 类型。

4. 只要使用的组件不管内置组件还是三方组件，只需绑定 v-model，无需其他操作，即可参与校验。
5. 如果使用原生 checkbox 或三方组件不支持 v-model 等，只需要给组件绑定 binddata 方法即可触发表单校验，无需绑定事件到 methods 中，见下方完整示例。
6. binddata(‘name’,$event.detail.value,‘form’)" 方法接受三个值，
   第一个参数传入当前表单组件所在的 name，同当前父组件 uni-forms-item 绑定属性 name 的值
   第二个参数传入需要校验的值，内置组件可以通过 $event.detail.value 获取到组件的返回值，自定义组件传入需要校验的值即可
   第三个参数传入 uni-forms 组件绑定属性 ref 的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个 uni-forms 可忽略
7. 如果内置 binddata 方法无法满足需求，在当前页面的 methods 中复写此方法即可，复写此方法需要调用 uni-forms 的 setValue 来触发表单校验，见下方 setValue方法说明

校验规则说明

校验规则接受一个 Object 类型的值，通过传入不同的规则来表示每个表单域的值该如何校验

对象的 key 表示当前表单域的字段名，value 为具体的校验规则

rules 属性说明

validateFunction 自定义校验规则使用说明:

uni-forms 的 rules 基础规则有时候不能满足项目的所有使用场景，这时候可以使用 validateFunction 来自定义校验规则

validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ，当然返回参数名开发者可以自定义：

• rule : 当前校验字段在 rules 中所对应的校验规则
• value : 当前校验字段的值
• data : 所有校验字段的字段和值的对象
• callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可，如果需要显示不同的 errMessage，如果校验不通过需要执行callback(‘提示错误信息’)，如果校验通过，执行callback()即可

注意：

• 需要注意，如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules
  属性来配置校验规则，这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则
• 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
• 如果使用了 validateFunction 且 required 为false的情况，表现为不填写内容不校验，有内容才校验，所以内容为空时 validateFunction 不会执行

实例