Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149257938
--- 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.
--- End diff --
The loading animation will be started if a loading-indicator is included in
the refresh component.
---
