核心组件

核心组件的定义是跟浏览器、Vue 中保持一致，如果只使用这些组件的话，可以直接跨浏览器。

a

该组件目前映射到 Text，目前主要用于在 hippy-vue-router 中进行页面跳转。 一切同 p。

事件

button

[范例：demo-button.vue]

该组件映射到 View 上是因为它是一个可点击的容器，容器里面可以放图片、也可以放文本。但是因为 View 不能包裹文本，所以需要在 <button> 里包裹其它文本组件才能显示文字，这个跟浏览器不一样，浏览器的 <button> 也可以包裹 <span> 组件，所以这只是需要开发时注意一下。

事件

div

[范例：demo-div.vue]

div 组件容器，默认不可以滚动。可以通过增加样式参数 overflow-y: scroll 切换为可以纵向滚动容器，或者增加样式参数 overflow-x: scroll 切换为水平滚动容器。在终端侧会被映射成 ScrollView，因此具备 ScrollView 通用的能力。

参数

样式内特殊属性

事件

方法

scrollTo

仅在 overflow-y/x: scroll 时适用

(x: number, y: number, duration: boolean) => void 滚动到指定的 X，Y 偏移值，第三个参数为是否启用平滑滚动动画。

• x: number - X 偏移值
• y: number - Y 偏移值
• duration: number | boolean - 毫秒为单位的滚动时间, 默认 1000ms，false 等同 0ms

form

[范例：demo-div.vue]

别的组件容器。 一切同 div。

iframe

[范例：demo-iframe.vue]

内嵌网页容器。

参数

事件

img

[范例：demo-img.vue]

图片组件，和浏览器的一样。

• 注意: 必须指定样式中的宽度和高度，否则无法工作。
• 注意: Android 端默认会带上灰底色用于图片占位，可以加上 background-color: transparent 样式改为透明背景。

参数

样式内特殊属性

事件

input

[范例：demo-input.vue]

单行文本组件。

不建议手工双向绑定数据，建议通过 v-model 来绑定视图和数据。

差异性

由于系统组件层的差异，如果 input 处于会被键盘遮住的位置，在呼出键盘后：

• iOS 则是正常的遮住
• Android 的表现为页面会被键盘顶起，顶起的幅度取决于 input 的 Y 轴位置决定

关于解决此间的平台差异性，我们仍在讨论。

若有 iOS 对齐 Android 的键盘顶起的需求，建议参考 StackOverflow，在业务层解决。

Android 弹出后盖住界面的解决办法

在部分 Android 机型上，键盘弹出后也可能会产生盖住界面的情况，一般情况下可以通过修改 AndroidMainfest.xml 文件，在 activity 上增加 android:windowSoftInputMode=”adjustPan” 解决。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tencent.mtt.hippy.example"
>
    <application
        android:allowBackup="true"
        android:label="@string/app_name"
    >
        <!-- 注意 android:windowSoftInputMode="adjustPan" 写在 activity 的参数里-->
        <activity android:name=".MyActivity"
            android:windowSoftInputMode="adjustPan"
            android:label="@string/activity_name"
            android:configChanges="orientation|screenSize"
        >
        </activity>
    </application>
</manifest>

该参数的意义是：

• adjustResize: resize the page content
• adjustPan: move page content without resizing page content

详情请参考 Android 开发文档。

参数

事件

方法

blur

() => void 让指定的 input 组件失去光标焦点，与 focus() 的作用相反。

clear

() => void 清空输入框的内容。

focus

() => void 指派 input 获得焦点。

getValue

() => Promise<string> 获得文本框中的内容。

hideInputMethod

() => void 隐藏软键盘。

setValue

(value: string) => void 设置文本框内容。

• value: string - 文本框内容

showInputMethod

() => void 显示软键盘。

label

[范例：demo-p.vue]

显示文本。 一切同 p。

事件

ul

[范例：demo-list.vue]

Hippy 的重点功能，高性能的可复用列表组件。里面第一层只能包含 <li>。

参数

事件

方法

scrollTo

(xOffset: number, yOffset: number: duration: number) => void 通知 ListView 滑动到某个具体坐标偏移值(offset)的位置。

• xOffset: number - 滑动到 X 方向的 offset
• yOffset: numbere - 滑动到 Y 方向的 offset
• number: boolean - 多长事件滚到指定位置

scrollToIndex

(xIndex: number, yIndex: number: animated: boolean) => void 通知 ListView 滑动到第几个 item。

• xIndex: number - 滑动到 X 方向的第 xIndex 个 item
• yIndex: number - 滑动到 Y 方向的 yIndex 个 item
• animated: boolean - 滑动过程是否使用动画

li

ul 的子节点，终端层节点回收和复用的最小颗粒度。

[范例：demo-list.vue]

参数

当设置ul 的 :horizontal=true 启用横向无限列表时，需显式设置 li 样式宽度

p

[范例：demo-p.vue]

显示文本，不过因为 Hippy 下没有 display: inline 的显示模式，默认全部都是 flex 的。

事件

参数

• ellipsizeMode 的参数含义：
  • clip - 超过指定行数的文字会被直接截断，不显示“…”；（仅iOS支持）
  • head - 文字将会从头开始截断，保证字符串的最后的文字可以正常显示在 Text 组件的最后，而从开头给截断的文字，将以 “…” 代替，例如 “…wxyz”；（仅iOS支持）
  • middle - “文字将会从中间开始截断，保证字符串的最后与最前的文字可以正常显示在Text组件的响应位置，而中间给截断的文字，将以 “…” 代替，例如 “ab…yz”；（仅iOS支持）
  • tail - 文字将会从最后开始截断，保证字符串的最前的文字可以正常显示在 Text 组件的最前，而从最后给截断的文字，将以 “…” 代替，例如 “abcd…”；

span

[范例：demo-p.vue]

显示文本。 一切同 p。

事件

textarea

[范例：demo-p.vue]

多行文本输入框。 一切同 input。