组件的基本使用：
uni-app 提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼接成自己的应用。
uni-app 中的组件，就像 HTML 中的 div、span、p 等等标签一样，用于搭建页面的基础结构。
text 文本组件的用法：
text 组件就是用来显示一个文本的，它就类似于 HTML 中的 span 标签。
text 组件的属性如下：
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
selectable | Boolean | false | 文本是否可选 | |
space | String | | 显示连续空格 | App、H5、微信小程序 |
decode | Boolean | false | 是否解码 | App、H5、微信小程序 |
space 值说明
值 | 说明 |
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
注意：
-
<text> 组件内只支持嵌套<text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。 - 在app-nvue下，只有
<text>才能包裹文本内容。无法在<view>组件包裹文本。 - decode 可以解析的有
<>&'  。 - 各个操作系统的空格标准并不一致。
- 除了文本节点以外的其他节点都无法长按选中。
- 支持
\n 方式换行。 - 如果使用
<span> 组件编译时会被转换为<text>。
示例代码如下：
首页
text组件的学习
text组件中的selectable的属性的学习
组件中的 space属性的学习
效果图：
view 视图容器组件的用法：
view 视图容器组件，类似于 HTML 中的 div ，是一个盒子，一个容器组件。
如果使用nvue，则需注意，包裹文字应该使用组件。
属性说明
属性名 | 类型 | 默认值 | 说明 |
hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态，也就是阻止事件冒泡 |
hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
hover-stop-propagation 属性介绍：
在实际开开发过程中，当子父组件都有点击事件时，触发子组件的点击事件会一并触发触发父组件的点击事件，如果想阻止事件穿透，那么就需要给子组件设置hover-stop-propagation 属性
事件冒泡代码：
view 组件中 hover-stop-propagation 属性的使用
事件冒泡效果图：
出现上述情况以后，可以通过子组件设置 hover-stop-propagation 属性 来阻止事件冒泡，如下代码：
view 组件中 hover-stop-propagation 属性的使用
效果图：
button 按钮组件的用法：
button 按钮组件
属性说明
属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
size | String | default | 按钮的大小 | | |
type | String | default | 按钮的样式类型 | | |
plain | Boolean | false | 按钮是否镂空，背景色透明 | | |
disabled | Boolean | false | 是否禁用 | | |
loading | Boolean | false | 名称前是否带 loading 图标 | | App-nvue 平台，在 ios 上为雪花，Android上为圆圈 |
form-type | String | | 用于 | | |
open-type | String | | 开放能力 | | |
hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | | App-nvue 平台暂不支持 |
hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | | |
hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | | |
app-parameter | String | | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | | 微信小程序、QQ小程序 |
hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | | 微信小程序 |
lang | string | 'en' | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | | 微信小程序 |
session-from | string | | 会话来源，open-type="contact"时有效 | | 微信小程序 |
send-message-title | string | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | | 微信小程序 |
send-message-path | string | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | | 微信小程序 |
send-message-img | string | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | | 微信小程序 |
show-message-card | boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | | 微信小程序 |
@getphonenumber | Handler | | 获取用户手机号回调 | open-type="getPhoneNumber" | 微信小程序 |
@getuserinfo | Handler | | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | open-type="getUserInfo" | 微信小程序 |
@error | Handler | | 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 微信小程序 |
@opensetting | Handler | | 在打开授权设置页并关闭后回调 | open-type="openSetting" | 微信小程序 |
@launchapp | Handler | | 打开 APP 成功的回调 | open-type="launchApp" | 微信小程序 |
- 注1：
button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} -
open-type="launchApp"时需要调起的APP接入微信OpenSDK详见
size 有效值
值 | 说明 |
default | 默认大小 |
mini | 小尺寸 |
type 有效值
值 | 说明 |
primary | 微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式 |
default | 白色 |
warn | 红色 |
form-type 有效值
值 | 说明 |
submit | 提交表单 |
reset | 重置表单 |
open-type 有效值
值 | 说明 | 平台差异说明 |
feedback | 打开“意见反馈”页面，用户可提交反馈内容并上传日志 | App、微信小程序、QQ小程序 |
share | 触发用户转发 | 微信小程序、百度小程序、支付宝小程序、字节跳动小程序、QQ小程序 |
getUserInfo | 获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括头像、昵称等信息 | 微信小程序、百度小程序、QQ小程序 |
contact | 打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息 | 微信小程序、百度小程序 |
getPhoneNumber | 获取用户手机号，可以从@getphonenumber回调中获取到用户信息 | 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 |
launchApp | 打开APP，可以通过app-parameter属性设定向APP传的参数 | 微信小程序、QQ小程序 |
openSetting | 打开授权设置页 | 微信小程序、百度小程序 |
getAuthorize | 支持小程序授权 | 支付宝小程序 |
contactShare | 分享到通讯录好友 | 支付宝小程序 |
lifestyle | 关注生活号 | 支付宝小程序 |
openGroupProfile | 呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest中必须配置groupIdList | QQ小程序基础库1.4.7版本+ |
注意
- 在小程序中，开发者可以登录微信小程序管理后台 、QQ小程序后台后，进入菜单“客服反馈”页面获取反馈内容。
- 在 App 中，开发者登录DCloud开发者中心 后点击应用名称，进入左侧菜单“用户反馈”页面获取反馈内容。
- 点击 share 分享按钮时会触发onShareAppMessage
- 支付宝小程序平台，获取用户手机号时，建议先通过条件编译的方式，调用支付宝原生API，参考
image 组件的使用：
image 就是用来显示图片的组件
属性：
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
src | String | | 图片资源地址 | |
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | |
lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 微信小程序、App、百度小程序、字节跳动小程序 |
fade-show | Boolean | true | 图片显示动画效果 | 仅App-nvue 2.3.4+ Android有效 |
webp | boolean | false | 默认不解析 webP 格式，只支持网络资源 | 微信小程序2.9.0 |
show-menu-by-longpress | boolean | false | 开启长按图片显示识别小程序码菜单 | 微信小程序2.7.0 |
@error | HandleEvent | | 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | |
@load | HandleEvent | | 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} | |
Tips
-
<image> 组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度 -
src 仅支持相对路径、绝对路径，支持 base64 码； - 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置
image{will-change: transform} ,可优化此问题。 - 自定义组件里面使用
<image>时，若src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。 - webp格式的图片在Android上是内置支持的。iOS上不同平台不一样，具体如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
- svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址。
mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
模式 | 值 | 说明 |
缩放 | scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
缩放 | heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 微信小程序 2.10.3 支持 |
裁剪 | top | 不缩放图片，只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片，只显示图片的底部区域 |
裁剪 | center | 不缩放图片，只显示图片的中间区域 |
裁剪 | left | 不缩放图片，只显示图片的左边区域 |
裁剪 | right | 不缩放图片，只显示图片的右边区域 |
裁剪 | top left | 不缩放图片，只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片，只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片，只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片，只显示图片的右下边区域 |
示例代码：
swipter 按钮组件的用法：
swipter 组件通常用于实现轮播图，可以实现上下滑动、也可以左右滑动。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
indicator-dots | Boolean | false | 是否显示面板指示点 | |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | |
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | |
active-class | String | | swiper-item 可见时的 class | 支付宝小程序 |
changing-class | String | | acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class | 支付宝小程序 |
autoplay | Boolean | false | 是否自动切换 | |
current | Number | 0 | 当前所在滑块的 index | |
current-item-id | String | | 当前所在滑块的 item-id ，不能与 current 被同时指定 | 支付宝小程序不支持 |
interval | Number | 5000 | 自动切换时间间隔 | |
duration | Number | 500 | 滑动动画时长 | app-nvue不支持 |
circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 | |
vertical | Boolean | false | 滑动方向是否为纵向 | |
previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序不支持 |
next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | app-nvue、字节跳动小程序不支持 |
acceleration | Boolean | false | 当开启时，会根据滑动速度，连续滑动多屏 | 支付宝小程序 |
disable-programmatic-animation | Boolean | false | 是否禁用代码变动触发 swiper 切换时使用动画。 | 支付宝小程序 |
display-multiple-items | Number | 1 | 同时显示的滑块数量 | app-nvue、支付宝小程序不支持 |
skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 | App、微信小程序 |
disable-touch | Boolean | false | 是否禁止用户 touch 操作 | App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更） |
touchable | Boolean | true | 是否监听用户的触摸事件，只在初始化时有效，不能动态变更 | 字节跳动小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch） |
easing-function | String | default | 指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序 |
@change | EventHandle | | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | |
@transition | EventHandle | | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy | App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序 |
@animationfinish | EventHandle | | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} | 字节跳动小程序不支持 |
change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：
- autoplay 自动播放导致swiper变化。
- touch 用户划动引起swiper变化。
- 其他原因将用空字符串表示。
swiper做左右拖动的长列表的专项问题
- swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
- 因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。
- 这是一个范例，插件市场新闻模板示例，它在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据，dom中的数据过多时，它会自动释放。就是说App上，只要看过这一页，再进去时内容是还在的。而在非App上，只能做到缓存3页数据，其他页即便看过，再进去也会重新加载。并且非App的这种情况下，不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新，但性能不佳。一般小程序的大厂案例里，提供左右拖长列表的，都是这种做法。
Tips
- 使用竖向滚动时，需要给
<scroll-view> 一个固定高度，通过 css 设置 height。 - 注意：其中只可放置
<swiper-item> 组件，否则会导致未定义的行为。 - 如果遇到current、current-item-id属性设置不生效的问题参考：组件属性设置不生效解决办法
- banner图的切换效果和指示器的样式，有多种风格可自定义，可在uni-app插件市场搜索
- swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
- 同时监听 change transition，开始滑动时触发transition, 放开手后，在ios平台触发顺序为 transition... change，Android/微信小程序/支付宝为 transition... change transition...
swiper-item
仅可放置在 <swiper> 组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。
属性名 | 类型 | 默认值 | 说明 |
item-id | String | | 该 swiper-item 的标识符 |
示例：
1
2
样式
.swipter-container {
width: 100%;
}效果图：
