uni-app基础组件
<p><strong><span style="font-size: 18px">以下所有内容都来自uni-app官方文档: https://uniapp.dcloud.io/component/</span></strong></p><p> </p>
<ul>
<li><strong><span style="font-size: 18px">视图容器</span></strong></li>
<ul>
<li><em><span style="font-size: 18px">view</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"> <span style="font-size: 15px">view组件类似于html中的div,其主要作用就是当做一个容器来使用</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> 属性说明</span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>hover-class</td>
<td>String</td>
<td>none</td>
<td>指定按下去的样式类。当 hover-class="none" 时，没有点击态效果</td>
</tr>
<tr>
<td>hover-stop-propagation</td>
<td>Boolean</td>
<td>false</td>
<td>指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）</td>
</tr>
<tr>
<td>hover-start-time</td>
<td>Number</td>
<td>50</td>
<td>按住后多久出现点击态，单位毫秒</td>
</tr>
<tr>
<td>hover-stay-time</td>
<td>Number</td>
<td>400</td>
<td>手指松开后点击态保留时间，单位毫秒</td>
</tr>
</tbody>
</table>
<ul>
<ul>
<li><em><span style="font-size: 18px">scroll-view</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 15px">可滚动区域,在webview中性能不如页面滚动</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> 使用竖向滚动时，需要给 <code><scroll-view></code> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<code><scroll-view></code>添加<code>white-space: nowrap;</code>样式。</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> 属性说明</span></span></p>
<p> </p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>scroll-x</td>
<td>Boolean</td>
<td>false</td>
<td>允许横向滚动</td>
<td> </td>
</tr>
<tr>
<td>scroll-y</td>
<td>Boolean</td>
<td>false</td>
<td>允许纵向滚动</td>
<td> </td>
</tr>
<tr>
<td>upper-threshold</td>
<td>Number</td>
<td>50</td>
<td>距顶部/左边多远时（单位px），触发 scrolltoupper 事件</td>
<td> </td>
</tr>
<tr>
<td>lower-threshold</td>
<td>Number</td>
<td>50</td>
<td>距底部/右边多远时（单位px），触发 scrolltolower 事件</td>
<td> </td>
</tr>
<tr>
<td>scroll-top</td>
<td>Number</td>
<td> </td>
<td>设置竖向滚动条位置</td>
<td> </td>
</tr>
<tr>
<td>scroll-left</td>
<td>Number</td>
<td> </td>
<td>设置横向滚动条位置</td>
<td> </td>
</tr>
<tr>
<td>scroll-into-view</td>
<td>String</td>
<td> </td>
<td>值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</td>
<td> </td>
</tr>
<tr>
<td>scroll-with-animation</td>
<td>Boolean</td>
<td>false</td>
<td>在设置滚动条位置时使用动画过渡</td>
<td> </td>
</tr>
<tr>
<td>enable-back-to-top</td>
<td>Boolean</td>
<td>false</td>
<td>iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td>
<td>app-nvue，微信小程序</td>
</tr>
<tr>
<td>show-scrollbar</td>
<td>Boolean</td>
<td>false</td>
<td>控制是否出现滚动条</td>
<td>App-nvue 2.1.5+</td>
</tr>
<tr>
<td>refresher-enabled</td>
<td>Boolean</td>
<td>false</td>
<td>开启自定义下拉刷新</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>refresher-threshold</td>
<td>number</td>
<td>45</td>
<td>设置自定义下拉刷新阈值</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>refresher-default-style</td>
<td>string</td>
<td>"black"</td>
<td>设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>refresher-background</td>
<td>string</td>
<td>"#FFF"</td>
<td>设置自定义下拉刷新区域背景颜色</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>refresher-triggered</td>
<td>boolean</td>
<td>false</td>
<td>设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>enable-flex</td>
<td>boolean</td>
<td>false</td>
<td>启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。</td>
<td>微信小程序 2.7.3</td>
</tr>
<tr>
<td>scroll-anchoring</td>
<td>boolean</td>
<td>false</td>
<td>开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。</td>
<td>微信小程序 2.8.2</td>
</tr>
<tr>
<td>@scrolltoupper</td>
<td>EventHandle</td>
<td> </td>
<td>滚动到顶部/左边，会触发 scrolltoupper 事件</td>
<td> </td>
</tr>
<tr>
<td>@scrolltolower</td>
<td>EventHandle</td>
<td> </td>
<td>滚动到底部/右边，会触发 scrolltolower 事件</td>
<td> </td>
</tr>
<tr>
<td>@scroll</td>
<td>EventHandle</td>
<td> </td>
<td>滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td>
<td> </td>
</tr>
<tr>
<td>@refresherpulling</td>
<td>EventHandle</td>
<td> </td>
<td>自定义下拉刷新控件被下拉</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>@refresherrefresh</td>
<td>EventHandle</td>
<td> </td>
<td>自定义下拉刷新被触发</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>@refresherrestore</td>
<td>EventHandle</td>
<td> </td>
<td>自定义下拉刷新被复位</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
<tr>
<td>@refresherabort</td>
<td>EventHandle</td>
<td> </td>
<td>自定义下拉刷新被中止</td>
<td>app-vue 2.5.12+,微信小程序基础库2.10.1+</td>
</tr>
</tbody>
</table>
<p> </p>
<ul>
<ul>
<li><em><span style="font-size: 18px">swiper</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 15px">滑块视图容器,一般用于左右或上下滑动</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> 属性说明</span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>indicator-dots</td>
<td>Boolean</td>
<td>false</td>
<td>是否显示面板指示点</td>
<td> </td>
</tr>
<tr>
<td>indicator-color</td>
<td>Color</td>
<td>rgba(0, 0, 0, .3)</td>
<td>指示点颜色</td>
<td> </td>
</tr>
<tr>
<td>indicator-active-color</td>
<td>Color</td>
<td>#000000</td>
<td>当前选中的指示点颜色</td>
<td> </td>
</tr>
<tr>
<td>active-class</td>
<td>String</td>
<td> </td>
<td>swiper-item 可见时的 class</td>
<td>支付宝小程序</td>
</tr>
<tr>
<td>changing-class</td>
<td>String</td>
<td> </td>
<td>acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class</td>
<td>支付宝小程序</td>
</tr>
<tr>
<td>autoplay</td>
<td>Boolean</td>
<td>false</td>
<td>是否自动切换</td>
<td> </td>
</tr>
<tr>
<td>current</td>
<td>Number</td>
<td>0</td>
<td>当前所在滑块的 index</td>
<td> </td>
</tr>
<tr>
<td>current-item-id</td>
<td>String</td>
<td> </td>
<td>当前所在滑块的 item-id ，不能与 current 被同时指定</td>
<td>支付宝小程序不支持</td>
</tr>
<tr>
<td>interval</td>
<td>Number</td>
<td>5000</td>
<td>自动切换时间间隔</td>
<td> </td>
</tr>
<tr>
<td>duration</td>
<td>Number</td>
<td>500</td>
<td>滑动动画时长</td>
<td>app-nvue不支持</td>
</tr>
<tr>
<td>circular</td>
<td>Boolean</td>
<td>false</td>
<td>是否采用衔接滑动，即播放到末尾后重新回到开头</td>
<td> </td>
</tr>
<tr>
<td>vertical</td>
<td>Boolean</td>
<td>false</td>
<td>滑动方向是否为纵向</td>
<td> </td>
</tr>
<tr>
<td>previous-margin</td>
<td>String</td>
<td>0px</td>
<td>前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值</td>
<td>app-nvue、字节跳动小程序不支持</td>
</tr>
<tr>
<td>next-margin</td>
<td>String</td>
<td>0px</td>
<td>后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</td>
<td>app-nvue、字节跳动小程序不支持</td>
</tr>
<tr>
<td>acceleration</td>
<td>Boolean</td>
<td>false</td>
<td>当开启时，会根据滑动速度，连续滑动多屏</td>
<td>支付宝小程序</td>
</tr>
<tr>
<td>disable-programmatic-animation</td>
<td>Boolean</td>
<td>false</td>
<td>是否禁用代码变动触发 swiper 切换时使用动画。</td>
<td>支付宝小程序</td>
</tr>
<tr>
<td>display-multiple-items</td>
<td>Number</td>
<td>1</td>
<td>同时显示的滑块数量</td>
<td>app-nvue、支付宝小程序不支持</td>
</tr>
<tr>
<td>skip-hidden-item-layout</td>
<td>Boolean</td>
<td>false</td>
<td>是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息</td>
<td>App、微信小程序</td>
</tr>
<tr>
<td>disable-touch</td>
<td>Boolean</td>
<td>false</td>
<td>是否禁止用户 touch 操作</td>
<td>App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更）</td>
</tr>
<tr>
<td>touchable</td>
<td>Boolean</td>
<td>true</td>
<td>是否监听用户的触摸事件，只在初始化时有效，不能动态变更</td>
<td>字节跳动小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）</td>
</tr>
<tr>
<td>easing-function</td>
<td>String</td>
<td>default</td>
<td>指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic</td>
<td>微信小程序、快手小程序</td>
</tr>
<tr>
<td>@change</td>
<td>EventHandle</td>
<td> </td>
<td>current 改变时会触发 change 事件，event.detail = {current: current, source: source}</td>
<td> </td>
</tr>
<tr>
<td>@transition</td>
<td>EventHandle</td>
<td> </td>
<td>swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy</td>
<td>App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序、快手小程序</td>
</tr>
<tr>
<td>@animationfinish</td>
<td>EventHandle</td>
<td> </td>
<td>动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}</td>
<td>字节跳动小程序不支持</td>
</tr>
</tbody>
</table>
<p><span style="font-size: 18px"><span style="font-size: 15px"> change事件返回的detail表示触发原因,其中有三个取值:autoplay(自动播放),touch(用户触发),空字符串(其他原因)</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> swiper做左右拖动的长列表时,可以参考这个范例，插件市场新闻模板示例，</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> swiper-item组件:仅可放在swiper中,宽高自动设置为100%,属性:item-id 该组件的标识</span></span></p>
<ul>
<ul>
<li><em><span style="font-size: 18px">match-media</span></em><span style="font-size: 18px"><em> </em></span></li>
</ul>
</ul>
<p> media query 匹配检测节点。</p>
<p> 类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。</p>
<p> 例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。</p>
<p> </p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>必填</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>min-width</td>
<td>number</td>
<td> </td>
<td>否</td>
<td>页面最小宽度（ px 为单位）</td>
</tr>
<tr>
<td>max-width</td>
<td>number</td>
<td> </td>
<td>否</td>
<td>页面最大宽度（ px 为单位）</td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td> </td>
<td>否</td>
<td>页面宽度（ px 为单位）</td>
</tr>
<tr>
<td>min-height</td>
<td>number</td>
<td> </td>
<td>否</td>
<td>页面最小高度（ px 为单位）</td>
</tr>
<tr>
<td>max-height</td>
<td>number</td>
<td> </td>
<td>否</td>
<td>页面最大高度（ px 为单位）</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td> </td>
<td>否</td>
<td>页面高度（ px 为单位）</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td> </td>
<td>否</td>
<td>屏幕方向（ landscape 或 portrait ）</td>
</tr>
</tbody>
</table>
<ul>
<ul>
<li><em><span style="font-size: 18px">movable-area</span></em></li>
</ul>
</ul>
<p> 可拖动区域</p>
<p><code> movable-area</code>指代可拖动的范围，在其中内嵌<code>movable-view</code>组件用于指示可拖动的区域。</p>
<p> 即手指/鼠标按住<code>movable-view</code>拖动或双指缩放，但拖不出<code>movable-area</code>规定的范围。</p>
<p> 当然也可以不拖动，而使用代码来触发<code>movable-view</code>在<code>movable-area</code>里的移动缩放。</p>
<p> 注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px</p>
<p> </p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>scale-area</td>
<td>Boolean</td>
<td>false</td>
<td>当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area</td>
</tr>
</tbody>
</table>
<p> </p>
<ul>
<ul>
<li><em><span style="font-size: 18px">movable-view</span></em></li>
</ul>
</ul>
<p> 可移动的视图容器，在页面中可以拖拽滑动或双指缩放。</p>
<p><code> movable-view</code>必须在<code>movable-area</code>组件中，并且必须是直接子节点，否则不能移动。</p>
<p> 属性说明</p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>direction</td>
<td>String</td>
<td>none</td>
<td>movable-view的移动方向，属性值有all、vertical、horizontal、none</td>
<td> </td>
</tr>
<tr>
<td>inertia</td>
<td>Boolean</td>
<td>false</td>
<td>movable-view是否带有惯性</td>
<td>微信小程序、支付宝小程序、App、H5、百度小程序</td>
</tr>
<tr>
<td>out-of-bounds</td>
<td>Boolean</td>
<td>false</td>
<td>超过可移动区域后，movable-view是否还可以移动</td>
<td>微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序</td>
</tr>
<tr>
<td>x</td>
<td>Number / String</td>
<td> </td>
<td>定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画</td>
<td> </td>
</tr>
<tr>
<td>y</td>
<td>Number / String</td>
<td> </td>
<td>定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画</td>
<td> </td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>20</td>
<td>阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快</td>
<td>微信小程序、支付宝小程序、App、H5、百度小程序</td>
</tr>
<tr>
<td>friction</td>
<td>Number</td>
<td>2</td>
<td>摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值</td>
<td>微信小程序、支付宝小程序、App、H5、百度小程序</td>
</tr>
<tr>
<td>disabled</td>
<td>Boolean</td>
<td>false</td>
<td>是否禁用</td>
<td> </td>
</tr>
<tr>
<td>scale</td>
<td>Boolean</td>
<td>false</td>
<td>是否支持双指缩放，默认缩放手势生效区域是在movable-view内</td>
<td>微信小程序、支付宝小程序、App、H5、快手小程序</td>
</tr>
<tr>
<td>scale-min</td>
<td>Number</td>
<td>0.5</td>
<td>定义缩放倍数最小值</td>
<td>微信小程序、支付宝小程序、App、H5、快手小程序</td>
</tr>
<tr>
<td>scale-max</td>
<td>Number</td>
<td>10</td>
<td>定义缩放倍数最大值</td>
<td>微信小程序、支付宝小程序、App、H5、快手小程序</td>
</tr>
<tr>
<td>scale-value</td>
<td>Number</td>
<td>1</td>
<td>定义缩放倍数，取值范围为 0.5 - 10</td>
<td>微信小程序、支付宝小程序、App、H5、快手小程序</td>
</tr>
<tr>
<td>animation</td>
<td>Boolean</td>
<td>true</td>
<td>是否使用动画</td>
<td>微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序</td>
</tr>
<tr>
<td>@change</td>
<td>EventHandle</td>
<td> </td>
<td>拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）</td>
<td> </td>
</tr>
<tr>
<td>@scale</td>
<td>EventHandle</td>
<td> </td>
<td>缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，</td>
<td>微信小程序、App、H5、百度小程序、快手小程序</td>
</tr>
</tbody>
</table>
<p> 除了基本事件外，movable-view提供了两个特殊事件</p>
<table>
<thead>
<tr><th>类型</th><th>触发条件</th></tr>
</thead>
<tbody>
<tr>
<td>htouchmove</td>
<td>初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch</td>
</tr>
<tr>
<td>vtouchmove</td>
<td>初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch</td>
</tr>
</tbody>
</table>
<ul>
<ul>
<li><em><span style="font-size: 18px">cover-view</span></em></li>
</ul>
</ul>
<p> 覆盖在原生组件上的文本视图。</p>
<p> app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view.<br> </p>
<p> </p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>scroll-top</td>
<td>number/string</td>
<td> </td>
<td>设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效</td>
<td>微信小程序2.1.0<br><br></td>
</tr>
</tbody>
</table>
<ul>
<ul>
<li><em><span style="font-size: 18px">cover-image</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 15px">覆盖在原生组件上的图片视图。可覆盖的原生组件同<code>cover-view</code>，支持嵌套在<code>cover-view</code>里。</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 15px"> </span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>String</td>
<td> </td>
<td>图标路径。支持本地路径、网络路径。不支持 base64 格式。</td>
<td> </td>
</tr>
<tr>
<td>@load</td>
<td>eventhandle</td>
<td> </td>
<td>图片加载成功时触发</td>
<td>微信小程序 2.1.0</td>
</tr>
<tr>
<td>@error</td>
<td>eventhandle</td>
<td> </td>
<td>图片加载失败时触发</td>
<td>微信小程序 2.1.0</td>
</tr>
</tbody>
</table>
<p> </p>
<ul>
<li><strong><span style="font-size: 18px">基础内容</span></strong></li>
<ul>
<li><em><span style="font-size: 18px">icon</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 14px">图标,由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 14px"> 属性说明</span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>String</td>
<td> </td>
<td>icon的类型</td>
</tr>
<tr>
<td>size</td>
<td>Number</td>
<td>23</td>
<td>icon的大小，单位px</td>
</tr>
<tr>
<td>color</td>
<td>Color</td>
<td> </td>
<td>icon的颜色，同css的color</td>
</tr>
</tbody>
</table>
<ul>
<ul>
<li><em><span style="font-size: 18px">text</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 14px">文本组件,用于包裹文本内容</span></span></p>
<p><span style="font-size: 18px"><span style="font-size: 14px"> 属性说明</span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>selectable</td>
<td>Boolean</td>
<td>false</td>
<td>文本是否可选</td>
<td>App、H5、快手小程序</td>
</tr>
<tr>
<td>user-select</td>
<td>Boolean</td>
<td>false</td>
<td>文本是否可选</td>
<td>微信小程序</td>
</tr>
<tr>
<td>space</td>
<td>String</td>
<td> </td>
<td>显示连续空格</td>
<td>App、H5、微信小程序</td>
</tr>
<tr>
<td>decode</td>
<td>Boolean</td>
<td>false</td>
<td>是否解码</td>
<td>App、H5、微信小程序</td>
</tr>
</tbody>
</table>
<p><span style="font-size: 18px"><span style="font-size: 14px"> space值有3个: ensp(中文字符空格一半大),emsp(中文字符空格大小),nbsp(根据字体设置的空格大小)</span></span></p>
<ul>
<ul>
<li><em><span style="font-size: 18px">rich-text</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 14px"> 富文本</span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台兼容</th></tr>
</thead>
<tbody>
<tr>
<td>nodes</td>
<td>Array / String</td>
<td>[]</td>
<td>节点列表 / HTML String</td>
<td> </td>
</tr>
<tr>
<td>space</td>
<td>string</td>
<td> </td>
<td>显示连续空格</td>
<td>微信基础库2.4.1+详见、QQ小程序、快手小程序详见</td>
</tr>
<tr>
<td>selectable</td>
<td>Boolean</td>
<td>false</td>
<td>富文本是否可以长按选中，可用于复制，粘贴等场景</td>
<td>百度小程序（真机）</td>
</tr>
</tbody>
</table>
<ul>
<ul>
<li><em><span style="font-size: 18px">progress</span></em></li>
</ul>
</ul>
<p><span style="font-size: 18px"><em> </em><span style="font-size: 14px">进度条</span></span></p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>percent</td>
<td>Float</td>
<td>无</td>
<td>百分比0~100</td>
<td> </td>
</tr>
<tr>
<td>show-info</td>
<td>Boolean</td>
<td>false</td>
<td>在进度条右侧显示百分比</td>
<td> </td>
</tr>
<tr>
<td>border-radius</td>
<td>number/string</td>
<td>0</td>
<td>圆角大小</td>
<td>app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序</td>
</tr>
<tr>
<td>font-size</td>
<td>number/string</td>
<td>16</td>
<td>右侧百分比字体大小</td>
<td>app-nvue、微信基础库2.3.1+、QQ小程序</td>
</tr>
<tr>
<td>stroke-width</td>
<td>Number</td>
<td>6</td>
<td>进度条线的宽度，单位px</td>
<td> </td>
</tr>
<tr>
<td>activeColor</td>
<td>Color</td>
<td>#09BB07（百度为#E6E6E6）</td>
<td>已选择的进度条的颜色</td>
<td> </td>
</tr>
<tr>
<td>backgroundColor</td>
<td>Color</td>
<td>#EBEBEB</td>
<td>未选择的进度条的颜色</td>
<td> </td>
</tr>
<tr>
<td>active</td>
<td>Boolean</td>
<td>false</td>
<td>进度条从左往右的动画</td>
<td> </td>
</tr>
<tr>
<td>active-mode</td>
<td>String</td>
<td>backwards</td>
<td>backwards: 动画从头播；forwards：动画从上次结束点接着播</td>
<td>App、H5、微信小程序、QQ小程序、快手小程序</td>
</tr>
<tr>
<td>duration</td>
<td>number</td>
<td>30</td>
<td>进度增加1%所需毫秒数</td>
<td>App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、快手小程序</td>
</tr>
<tr>
<td>@activeend</td>
<td>EventHandle</td>
<td> </td>
<td>动画完成事件</td>
<td>微信小程序</td>
</tr>
</tbody>
</table>
<ul>
<li><strong><span style="font-size: 18px">表单组件</span></strong>
<ul>
<li><em><span style="font-size: 18px">button 按钮</span></em></li>
<li><em><span style="font-size: 18px">CheckBox 多选框</span></em></li>
<li><em><span style="font-size: 18px">editor 富文本编辑器</span></em></li>
<li><em><span style="font-size: 18px">form 表单</span></em></li>
<li><em><span style="font-size: 18px">input 输入框</span></em></li>
<li><em><span style="font-size: 18px">label 表单分组</span></em></li>
<li><em><span style="font-size: 18px">picker 普通选择器,底部弹出的滚动选择弹窗</span></em></li>
<li><em><span style="font-size: 18px">picker-view 嵌入页面的滚动选择器</span></em></li>
<li><em><span style="font-size: 18px">radio 单项选择器</span></em></li>
<li><em><span style="font-size: 18px">slider 滑动选择器</span></em></li>
<li><em><span style="font-size: 18px">switch 开关选择器</span></em></li>
<li><em><span style="font-size: 18px">textarea 多行输入框</span></em></li>
</ul>
</li>
</ul>
<ul>
<li><strong><span style="font-size: 18px">路由及跳转</span></strong></li>
<ul>
<li><em><span style="font-size: 18px">navigater 页面跳转</span></em></li>
</ul>
</ul>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>String</td>
<td> </td>
<td>应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 <code>.vue</code> 后缀</td>
<td> </td>
</tr>
<tr>
<td>open-type</td>
<td>String</td>
<td>navigate</td>
<td>跳转方式</td>
<td> </td>
</tr>
<tr>
<td>delta</td>
<td>Number</td>
<td> </td>
<td>当 open-type 为 'navigateBack' 时有效，表示回退的层数</td>
<td> </td>
</tr>
<tr>
<td>animation-type</td>
<td>String</td>
<td>pop-in/out</td>
<td>当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画</td>
<td>App</td>
</tr>
<tr>
<td>animation-duration</td>
<td>Number</td>
<td>300</td>
<td>当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。</td>
<td>App</td>
</tr>
<tr>
<td>hover-class</td>
<td>String</td>
<td>navigator-hover</td>
<td>指定点击时的样式类，当hover-class="none"时，没有点击态效果</td>
<td> </td>
</tr>
<tr>
<td>hover-stop-propagation</td>
<td>Boolean</td>
<td>false</td>
<td>指定是否阻止本节点的祖先节点出现点击态</td>
<td>微信小程序</td>
</tr>
<tr>
<td>hover-start-time</td>
<td>Number</td>
<td>50</td>
<td>按住后多久出现点击态，单位毫秒</td>
<td> </td>
</tr>
<tr>
<td>hover-stay-time</td>
<td>Number</td>
<td>600</td>
<td>手指松开后点击态保留时间，单位毫秒</td>
<td> </td>
</tr>
<tr>
<td>target</td>
<td>String</td>
<td>self</td>
<td>在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram</td>
<td>微信2.0.7+、百度2.5.2+、QQ</td>
</tr>
</tbody>
</table>
<ul>
<li><strong><span style="font-size: 18px">媒体组件</span></strong>
<ul>
<li><em><span style="font-size: 18px">audio 音频</span></em></li>
<li><em><span style="font-size: 18px">camera 区域相机</span></em></li>
<li><em><span style="font-size: 18px">image 图片</span></em></li>
<li><em><span style="font-size: 18px">video 视频播放组件</span></em></li>
<li><em><span style="font-size: 18px">live-player 直播拉流</span></em></li>
<li><em><span style="font-size: 18px">live-pusher 直播推流</span></em></li>
</ul>
</li>
<li><strong><span style="font-size: 18px">地图</span></strong>
<ul>
<li><em><em><span style="font-size: 18px">map 地图组件</span></em></em>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>longitude</td>
<td>Number</td>
<td> </td>
<td>中心经度</td>
<td> </td>
</tr>
<tr>
<td>latitude</td>
<td>Number</td>
<td> </td>
<td>中心纬度</td>
<td> </td>
</tr>
<tr>
<td>scale</td>
<td>Number</td>
<td>16</td>
<td>缩放级别，取值范围为3-20</td>
<td>高德地图缩放比例与微信小程序不同</td>
</tr>
<tr>
<td>min-scale</td>
<td>Number</td>
<td>3</td>
<td>最小缩放级别</td>
<td>App-nvue 3.1.0+、微信小程序2.13+</td>
</tr>
<tr>
<td>max-scale</td>
<td>Number</td>
<td>20</td>
<td>最大缩放级别</td>
<td>App-nvue 3.1.0+、微信小程序2.13+</td>
</tr>
<tr>
<td>layer-style</td>
<td>Number</td>
<td>1</td>
<td>个性化地图</td>
<td>App-nvue 3.1.0+、微信小程序2.13+</td>
</tr>
<tr>
<td>markers</td>
<td>Array</td>
<td> </td>
<td>标记点</td>
<td> </td>
</tr>
<tr>
<td>polyline</td>
<td>Array</td>
<td> </td>
<td>路线</td>
<td> </td>
</tr>
<tr>
<td>circles</td>
<td>Array</td>
<td> </td>
<td>圆</td>
<td> </td>
</tr>
<tr>
<td>controls</td>
<td>Array</td>
<td> </td>
<td>控件</td>
<td> </td>
</tr>
<tr>
<td>include-points</td>
<td>Array</td>
<td> </td>
<td>缩放视野以包含所有给定的坐标点</td>
<td>App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序</td>
</tr>
<tr>
<td>enable-3D</td>
<td>Boolean</td>
<td>false</td>
<td>是否显示3D楼块</td>
<td>App-nvue 2.1.5+、微信小程序2.3.0</td>
</tr>
<tr>
<td>show-compass</td>
<td>Boolean</td>
<td>false</td>
<td>是否显示指南针</td>
<td>App-nvue 2.1.5+、微信小程序2.3.0</td>
</tr>
<tr>
<td>enable-zoom</td>
<td>Boolean</td>
<td>true</td>
<td>是否支持缩放</td>
<td>App-nvue 2.1.5+、微信小程序2.3.0</td>
</tr>
<tr>
<td>enable-scroll</td>
<td>Boolean</td>
<td>true</td>
<td>是否支持拖动</td>
<td>App-nvue 2.1.5+、微信小程序2.3.0</td>
</tr>
<tr>
<td>enable-rotate</td>
<td>Boolean</td>
<td>false</td>
<td>是否支持旋转</td>
<td>App-nvue 2.1.5+、微信小程序2.3.0</td>
</tr>
<tr>
<td>enable-overlooking</td>
<td>Boolean</td>
<td>false</td>
<td>是否开启俯视</td>
<td>App-nvue 2.1.5+、微信小程序2.3.0</td>
</tr>
<tr>
<td>enable-satellite</td>
<td>Boolean</td>
<td>false</td>
<td>是否开启卫星图</td>
<td>App-nvue 2.1.5+、微信小程序2.7.0</td>
</tr>
<tr>
<td>enable-traffic</td>
<td>Boolean</td>
<td>false</td>
<td>是否开启实时路况</td>
<td>App-nvue 2.1.5+、微信小程序2.7.0</td>
</tr>
<tr>
<td>enable-poi</td>
<td>Boolean</td>
<td>false</td>
<td>是否展示 POI 点</td>
<td>App-nvue 3.1.0+</td>
</tr>
<tr>
<td>enable-building</td>
<td>Boolean</td>
<td>false</td>
<td>是否展示建筑物</td>
<td>App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)</td>
</tr>
<tr>
<td>show-location</td>
<td>Boolean</td>
<td> </td>
<td>显示带有方向的当前定位点</td>
<td>微信小程序、H5、百度小程序、支付宝小程序</td>
</tr>
<tr>
<td>polygons</td>
<td>Array.<code><polygon></code></td>
<td> </td>
<td>多边形</td>
<td>App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序</td>
</tr>
<tr>
<td>enable-indoorMap</td>
<td>Boolean</td>
<td>false</td>
<td>是否展示室内地图</td>
<td>App-nvue 3.1.0+</td>
</tr>
<tr>
<td>@markertap</td>
<td>EventHandle</td>
<td> </td>
<td>点击标记点时触发，e.detail = {markerId}</td>
<td>App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id</td>
</tr>
<tr>
<td>@labeltap</td>
<td>EventHandle</td>
<td> </td>
<td>点击label时触发，e.detail = {markerId}</td>
<td>微信小程序2.9.0</td>
</tr>
<tr>
<td>@callouttap</td>
<td>EventHandle</td>
<td> </td>
<td>点击标记点对应的气泡时触发，e.detail = {markerId}</td>
<td> </td>
</tr>
<tr>
<td>@controltap</td>
<td>EventHandle</td>
<td> </td>
<td>点击控件时触发，e.detail = {controlId}</td>
<td> </td>
</tr>
<tr>
<td>@regionchange</td>
<td>EventHandle</td>
<td> </td>
<td>视野发生变化时触发</td>
<td>微信小程序、H5、百度小程序、支付宝小程序</td>
</tr>
<tr>
<td>@tap</td>
<td>EventHandle</td>
<td> </td>
<td>点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度</td>
<td> </td>
</tr>
<tr>
<td>@updated</td>
<td>EventHandle</td>
<td> </td>
<td>在地图渲染更新完成时触发</td>
<td>微信小程序、H5、百度小程序</td>
</tr>
<tr>
<td>@anchorpointtap</td>
<td>EventHandle</td>
<td> </td>
<td>点击定位标时触发，e.detail = {longitude, latitude}</td>
<td>App-nvue 3.1.0+、微信小程序2.13+</td>
</tr>
<tr>
<td>@poitap</td>
<td>EventHandle</td>
<td> </td>
<td>点击地图poi点时触发，e.detail = {name, longitude, latitude}</td>
<td>微信小程序2.3.0+</td>
</tr>
</tbody>
</table>
</li>
</ul>
</li>
</ul>
<ul>
<li><strong><span style="font-size: 18px">画布</span></strong></li>
<ul>
<li><em><span style="font-size: 18px">canvas 画布</span></em></li>
</ul>
</ul>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>String</td>
<td> </td>
<td>指定 canvas 类型，支持 2d (2.9.0) 和 webgl</td>
<td>微信小程序 2.7.0+ 字节小程序1.78.0+</td>
</tr>
<tr>
<td>canvas-id</td>
<td>String</td>
<td> </td>
<td>canvas 组件的唯一标识符</td>
<td> </td>
</tr>
<tr>
<td>disable-scroll</td>
<td>Boolean</td>
<td>false</td>
<td>当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新</td>
<td>字节跳动小程序不支持</td>
</tr>
<tr>
<td>@touchstart</td>
<td>EventHandle</td>
<td> </td>
<td>手指触摸动作开始</td>
<td>字节小程序1.78.0+</td>
</tr>
<tr>
<td>@touchmove</td>
<td>EventHandle</td>
<td> </td>
<td>手指触摸后移动</td>
<td>字节小程序1.78.0+</td>
</tr>
<tr>
<td>@touchend</td>
<td>EventHandle</td>
<td> </td>
<td>手指触摸动作结束</td>
<td>字节小程序1.78.0+</td>
</tr>
<tr>
<td>@touchcancel</td>
<td>EventHandle</td>
<td> </td>
<td>手指触摸动作被打断，如来电提醒，弹窗</td>
<td>字节小程序1.78.0+</td>
</tr>
<tr>
<td>@longtap</td>
<td>EventHandle</td>
<td> </td>
<td>手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动</td>
<td>字节跳动小程序不支持</td>
</tr>
<tr>
<td>@error</td>
<td>EventHandle</td>
<td> </td>
<td>当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}</td>
<td>字节跳动小程序不支持</td>
</tr>
</tbody>
</table>
<ul>
<li><strong><span style="font-size: 18px">webview</span></strong></li>
<ul>
<li><em><span style="font-size: 18px">webview web浏览器组件</span></em></li>
</ul>
</ul>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>src</td>
<td>String</td>
<td>webview 指向网页的链接</td>
<td> </td>
</tr>
<tr>
<td>allow</td>
<td>String</td>
<td>用于为 iframe 指定其特征策略</td>
<td>H5</td>
</tr>
<tr>
<td>sandbox</td>
<td>String</td>
<td>该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。</td>
<td>H5</td>
</tr>
<tr>
<td>webview-styles</td>
<td>Object</td>
<td>webview 的样式</td>
<td>App-vue</td>
</tr>
<tr>
<td>@message</td>
<td>EventHandler</td>
<td>网页向应用 <code>postMessage</code> 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。</td>
<td>H5 暂不支持（可以直接使用 window.postMessage）</td>
</tr>
<tr>
<td>@onPostMessage</td>
<td>EventHandler</td>
<td>网页向应用实时 <code>postMessage</code></td>
<td>App-nvue</td>
</tr>
</tbody>
</table>
<ul>
<li><strong><span style="font-size: 18px">广告</span></strong>
<ul>
<li><em><span style="font-size: 18px">ad 信息流广告</span></em></li>
<li><em><span style="font-size: 18px">ad-draw 沉浸式视频流广告</span></em></li>
<li><em><em><span style="font-size: 18px">ad-content-page </span></em></em>短视频内容联盟组件</li>
<li><em><span style="font-size: 18px">grid广告 </span></em></li>
</ul>
</li>
<li><strong><span style="font-size: 18px">页面属性节点</span></strong>
<ul>
<li><em><span style="font-size: 18px">page-meta</span></em></li>
<li><em><span style="font-size: 18px">navigation-bar</span></em></li>
<li><em><span style="font-size: 18px">custom-tab-bar</span></em></li>
</ul>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/codermuyi/p/15194595.html
頁:
[1]