Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258672
--- Diff: source/references/components/refresh.md ---
@@ -1,222 +1,141 @@
---
-title: <refresh> & <loading>
+title: <refresh>
type: references
group: Build-in Components
-order: 8.08
+order: 8.09
version: 2.1
---
-# refresh & loading
+# <refresh>
-<span class="weex-version">v0.6.1+</span>
+### <span class="weex-version">v0.6.1+</span>
-## Loading Components
+The `<refresh>` Component provide a pulldown-refresh function for some
special containers, its usage and attributes are similar to the `<loading>`
Component.
+> **Noteï¼** To be rendered properly, the `<refresh>` Component must
appear inside the special Component such as
`<scroller>`ã`<list>`ã`<hlist>`ã`<vlist>`ã`<waterfall>`.
-To be rendered properly, the refresh/loading Components must appear inside
the Scroller Component or the List Component.
+ - Simple example :
-### Child Components
+```
+<list>
+ <refresh>
+ ...
+ </refresh>
+ ...
+</list>
+```
+ - Complete example goes
[here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
+
+## Child Components
-Any other components, like the text and img components, can be put inside
the refresh component. And there is a special component named loading-indicator
used only inside the refresh or the loading components.
+ - Any other components, like the `<text>` and `<image>` components, can
be put inside the refresh component.
-* loading-indicator is a child component implemented with default
animation effect for the refresh component.
+ - `<loading-indicator>`: There is a special Component named
loading-indicator used only inside the `<refresh>` or the `<loading>`
Components, which implemented with default animation effect for the refresh
component.
-### Attributes
+ - Simple example :
+
+```
+<refresh>
+ <text>Refreshing</text>
+ <loading-indicator></loading-indicator>
+ ...
+</refresh>
+```
+ - Complete example goes
[here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-* display has value of show or hide.
+## Attributes
+ - Support all common attributes, check out [common
attributes](../common/common-attrs)
-### Styles
-common styles: check out [common styles for
components](../common-style.html)
+| Attribute | Type | Value | Default Value |
+| ------------- | ------ | -------------------------- | ------- |
+| `display` | String | show / hide | show |
-### Events
+#### `display`
-* onloading triggered when loading
+ - `show`ï¼If a `<loading-indicator>` Component is included in the
`<refresh>` Component, it will display and start the animation.
+ - `hide`ï¼Collapse the refresh view. If a `<loading-indicator>`
Component is included in the `<refresh>` Component, it will hide and stop the
animation.
-#### Restrictions
-* refresh/loading does not support remove action, Weex 0.9 will fix it.
-* refresh/loading despite setting with display='hide', the refresh/loading
view will still appear when scrolling due to known issues. it can be fixed with
a another display='hide' when the refresh/loading should be hidden.
-* refresh/loading can only be hidden or displayed with an attribute
display with value of show or hide. And there should be a statement of
display='hide' when display='show' shows up in an event function, or your
scroller may not response to user inputs.
+> **Noteï¼** The display and hide of `<refresh>` Components can only be
controlled by an attribute named `display` which has the value of show and
hide. A `display="show"` statement is always paired with a `display="hide"`
statement.
-#### Example
+ - Simple example :
--- End diff --
Example:
---
