Weex provide the ability of loading custom through DOM.addRule. Developers can load iconfont and custom font by specifying the font-family.
Developers may use the following code snippet to load their font:
``` html
<template>
<view>
...
...
@@ -57,31 +59,31 @@
**addRule(type, contentObject)**
- @fontFace 协议名称，不可修改。
- @fontFamily ```font-family```的名称。
- @src 字体地址，url('') 是保留字段，其参数如下:
-http. 从HTTP请求加载, e.g. ```url('http://at.alicdn.com/t/font_1469606063_76593.ttf')```
- https. 从HTTPS请求加载, e.g. ```url('https://at.alicdn.com/t/font_1469606063_76593.ttf')```
- local, Android ONLY. 从assets目录读取, e.g. url('local://foo.ttf'), foo.ttf 是文件名在你的assets目录中.
- file. 从本地文件读取, e.g. ```url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')```
- data. 从base64读取, e.g. ```url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')```, 上述data字段不全。
- @fontFace You should not change this as this is the name of the font rule
- @fontFamily You should provide the name of your font-family there, the valid name should be a string.
- @src The src of your custom font, and url('') is reserved for protocol reason, the supported parameters are listed below:
-`http`. Read from http, e.g. `url('http://at.alicdn.com/t/font_1469606063_76593.ttf')`
-`https`. Read from https, e.g. `url('https://at.alicdn.com/t/font_1469606063_76593.ttf')`
-`local`, *Android ONLY*. Read from assets directory e.g. `url('local://foo.ttf')`, the **foo.ttf** is in your android assets directory.
-`file`. Read from a local file, e.g. `url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdncom_t_font_1469606063_76593.ttf')`
-`data`. Read from a base64 data source, e.g. `url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')`, the above data field is only a part of the actual data.
> You can name `fontFamily` in `addRule` as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a '?'.
> Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.
> Calling `addRule` in `beforeCreate` is recommended.
让页面滚动到 ref 对应的组件，这个 API 只能用于可滚动组件的子节点，例如 ```<scroller>```，```<list>```, ```<waterfall>``` 等可滚动组件中。
Scroll the scrollable component to the referenced component. This API should only be used in the children components of a scrollable component, such as in a `<scroller>` or `<list>` component.
**scrollToElement(ref, options)**
- @ref，要滚动到的那个节点。
- @options
-offset，一个到其可见位置的偏移距离，默认是 0。
-animated，是否需要附带滚动动画，默认是 true。
- @ref, the referenced component who is meant to scroll into the view.
- @options,
-`offset`, an space on top of the ref component, which is also scrolling down to the visual viewport. Default is `0`.
-`animated`, a boolean indicates whether a scroll animation should be played. If set to false, the ref component will jump into the view without any transition animation. Default is true.
``` html
<template>
...
...
@@ -175,13 +177,13 @@
### getComponentRect
获取某个元素 View 的外框。
You can get the bounding rect of the referenced component using this API.
**getComponentRect(ref, callback)**
- @ref，要获取外框的那个节点。
- @callback，异步方法，通过回调返回信息。
- @ref, the referenced component.
- @callback, the callback function after executing this action.
> If you want to get the bounding rect of outside viewport of the weex container, you can specify the `ref` as a literal string `'viewport'`, like `getComponentRect('viewport', callback)`.
The `animation` module is used to perform animation on components.
JS-Animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component with Javascript.
- @ref, the element that will be animated. For example, if the value of `ref` for an element is `test`, you can start an animation with `this.$refs.test`.
- @options, animation properties such as keys, duration.
|styles |specifies the names and values of styles to which a transition effect should be applied.|
|duration |specifies the duration of animation execution, the default value is `0`, meaning that the component get the desired property immediately. |
|delay |specifies the waiting time before the animation starts. The default value is `0`. |
|needLayout |Specifies whether the change to layout(width/height/etc..) is persistence and takes affect after the animation. Default value is `false`|
|timingFunction |describes how the intermediate values are calculated for the CSS properties being affected by the animation effect. default value is `linear` |
- @callback, callback is a function called after the completion of animation. In iOS platform, you can use function to get information of animation execution.
-On iOS platform you can get animation's message about completion, there are two types of parameters with `result`, is `Success`and `Fail`, Android can not support until now.
Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Below are the common event attributes that can be added to weex components to define event actions.
### 事件穿透
### Event penetration
> Android和iOS下原生事件传递机制不同，这里仅针对iOS
> The principle of native event delivery under Android and iOS is different, only for iOS here.
When a parent view has multiple peer views, iOS will select the highest level View to respond to the event, and the underlying view event will never be responded.
Weex add attribute `eventPenetrationEnabled` to `<div>` component. When the value is `true`(default would be `false`), the view's children views still respond to the event normally, while the view itself will not respond to the event, but pass the event to the lower level View.
Weex add attribute `userInteractionEnabled` to `<div>` component. When the value is `false`(default would be `true`), neither the view nor its children views respond to the event. The event is passed to the lower layer View.
**longpress**
如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。
If a `longpress` event is bound to a component, the event will be triggered when user long press on it.
**事件对象**
**event object**
|key |value |备注 |
|-- |-- |-- |
|type |longpress| |
|target | |触发长按事件的目标组件 |
|timestamp| |长按事件触发时的时间戳(不支持 H5) |
|target | |The target component where the event is triggered |
If a `disappear` event is bound to a component inside a scrollable container, the event will be triggered when the component scrolls out of viewport and disappears from your sight.
**事件对象**
**event object**
|key |value |备注 |
|-- |-- |-- |
|type |disappear | |
|target | |触发 Disappear 事件的组件对象 |
|timestamp| |事件被触发时的时间戳(不支持 H5)|
|direction| ```up```或 ```down``` |触发事件时屏幕的滚动方向 |
|target | |The target component where the event is triggered |
|timestamp| |Timestamp when event is triggered|
|direction| ```up```or ```down``` |The direction in which the scroller is scrolling. Could be `up` or `down` |
