You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by miomin <gi...@git.apache.org> on 2017/11/01 14:22:16 UTC
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
GitHub user miomin opened a pull request:
https://github.com/apache/incubator-weex-site/pull/7
[WEEX-86][doc] Update refresh component's document.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/miomin/incubator-weex-site master
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/incubator-weex-site/pull/7.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #7
----
commit dc272cd400e874af80d912d1c7f911455961b601
Author: miomin <69...@qq.com>
Date: 2017-11-01T11:39:46Z
[WEEX-86][doc] Update refresh component's document.
commit be2fc698888577323eff02a73b8e7b58d255d887
Author: miomin <69...@qq.com>
Date: 2017-11-01T14:15:45Z
Correct grammar
commit 81038ea796e672960633c16741369cbf1f0ae59b
Author: miomin <69...@qq.com>
Date: 2017-11-01T14:20:22Z
update
----
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258730
--- 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 :
-```html
+```
<template>
- <scroller class="scroller">
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- <loading class="loading" @loading="onloading" :display="showLoading">
- <text class="indicator">Loading ...</text>
- </loading>
- </scroller>
+ <list>
+ <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+ ...
+ </refresh>
+ ...
+ </list>
</template>
<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- showLoading: 'hide',
- lists: [1, 2, 3, 4, 5]
- }
+ ...
+ methods: {
+ onrefresh (event) {
+ this.refreshing = true
+ setTimeout(() => {
+ this.refreshing = false
+ }, 2000)
},
- methods: {
- onloading (event) {
- modal.toast({ message: 'loading', duration: 1 })
- this.showLoading = 'show'
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- this.showLoading = 'hide'
- }, 1500)
- }
- }
}
</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
- .loading {
- justify-content: center;
- }
- .indicator {
- color: #888888;
- font-size: 42px;
- padding-top: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-## Refresh Components
+## Styles
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+ - Support all common styles, check out [common styles](../common/common-style)
--- End diff --
please check out the common styles
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149257486
--- 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.
--- End diff --
loading-indicator: this is a dedicated component which provides a default refresh animation effect, can only be used inside the `<refresh>` or `<loading>` components.
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258907
--- 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 :
-```html
+```
<template>
- <scroller class="scroller">
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- <loading class="loading" @loading="onloading" :display="showLoading">
- <text class="indicator">Loading ...</text>
- </loading>
- </scroller>
+ <list>
+ <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+ ...
+ </refresh>
+ ...
+ </list>
</template>
<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- showLoading: 'hide',
- lists: [1, 2, 3, 4, 5]
- }
+ ...
+ methods: {
+ onrefresh (event) {
+ this.refreshing = true
+ setTimeout(() => {
+ this.refreshing = false
+ }, 2000)
},
- methods: {
- onloading (event) {
- modal.toast({ message: 'loading', duration: 1 })
- this.showLoading = 'show'
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- this.showLoading = 'hide'
- }, 1500)
- }
- }
}
</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
- .loading {
- justify-content: center;
- }
- .indicator {
- color: #888888;
- font-size: 42px;
- padding-top: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-## Refresh Components
+## Styles
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+ - Support all common styles, check out [common styles](../common/common-style)
-### Child Components
+## Events
-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.
+### `onrefresh`
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
+ - Triggered when the scroller or list has been pulled down.
-### Attributes
-* display has value of show or hide, default value is show.
+### `onpullingdown` <span class="weex-version">v0.6.1+</span>
-Other attributes please check out the [common attributes](../common-attrs.html).
+ - Triggered when the scroller or list has been pulled down. you can get `dy`, `pullingDistance`, `viewHeight` and `type` from onpullingdown `event` object :
+ - `dy` : The offset between two scroll actions
+ - `pullingDistance` : The distance of pulling
+ - `viewHeight` : The height of refreshView
+ - `type` : "pullingdown" constant string type for this event
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-### Events
-* `onrefresh`: triggered when the scroller has been pulled down
-* `onpullingdown`: triggered when the scroller has been pulled down. you can get `dy, pullingDistance, viewHeight, type` from onpullingdown event object.
+ - Simple example :
--- End diff --
Example:
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by asfgit <gi...@git.apache.org>.
Github user asfgit closed the pull request at:
https://github.com/apache/incubator-weex-site/pull/7
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258764
--- 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 :
-```html
+```
<template>
- <scroller class="scroller">
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- <loading class="loading" @loading="onloading" :display="showLoading">
- <text class="indicator">Loading ...</text>
- </loading>
- </scroller>
+ <list>
+ <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+ ...
+ </refresh>
+ ...
+ </list>
</template>
<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- showLoading: 'hide',
- lists: [1, 2, 3, 4, 5]
- }
+ ...
+ methods: {
+ onrefresh (event) {
+ this.refreshing = true
+ setTimeout(() => {
+ this.refreshing = false
+ }, 2000)
},
- methods: {
- onloading (event) {
- modal.toast({ message: 'loading', duration: 1 })
- this.showLoading = 'show'
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- this.showLoading = 'hide'
- }, 1500)
- }
- }
}
</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
- .loading {
- justify-content: center;
- }
- .indicator {
- color: #888888;
- font-size: 42px;
- padding-top: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-## Refresh Components
+## Styles
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+ - Support all common styles, check out [common styles](../common/common-style)
-### Child Components
+## Events
-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.
+### `onrefresh`
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
+ - Triggered when the scroller or list has been pulled down.
--- End diff --
is pulled down.
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by cxfeng1 <gi...@git.apache.org>.
Github user cxfeng1 commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r157440371
--- 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 :
-```html
+```
<template>
- <scroller class="scroller">
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- <loading class="loading" @loading="onloading" :display="showLoading">
- <text class="indicator">Loading ...</text>
- </loading>
- </scroller>
+ <list>
+ <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+ ...
+ </refresh>
+ ...
+ </list>
</template>
<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- showLoading: 'hide',
- lists: [1, 2, 3, 4, 5]
- }
+ ...
+ methods: {
+ onrefresh (event) {
+ this.refreshing = true
+ setTimeout(() => {
+ this.refreshing = false
+ }, 2000)
},
- methods: {
- onloading (event) {
- modal.toast({ message: 'loading', duration: 1 })
- this.showLoading = 'show'
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- this.showLoading = 'hide'
- }, 1500)
- }
- }
}
</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
- .loading {
- justify-content: center;
- }
- .indicator {
- color: #888888;
- font-size: 42px;
- padding-top: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-## Refresh Components
+## Styles
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+ - Support all common styles, check out [common styles](../common/common-style)
-### Child Components
+## Events
-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.
+### `onrefresh`
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
+ - Triggered when the scroller or list has been pulled down.
-### Attributes
-* display has value of show or hide, default value is show.
+### `onpullingdown` <span class="weex-version">v0.6.1+</span>
--- End diff --
The event name is 'pullingdown', not 'onpullingdown'
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149259619
--- 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 :
-```html
+```
<template>
- <scroller class="scroller">
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- <loading class="loading" @loading="onloading" :display="showLoading">
- <text class="indicator">Loading ...</text>
- </loading>
- </scroller>
+ <list>
+ <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+ ...
+ </refresh>
+ ...
+ </list>
</template>
<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- showLoading: 'hide',
- lists: [1, 2, 3, 4, 5]
- }
+ ...
+ methods: {
+ onrefresh (event) {
+ this.refreshing = true
+ setTimeout(() => {
+ this.refreshing = false
+ }, 2000)
},
- methods: {
- onloading (event) {
- modal.toast({ message: 'loading', duration: 1 })
- this.showLoading = 'show'
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- this.showLoading = 'hide'
- }, 1500)
- }
- }
}
</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
- .loading {
- justify-content: center;
- }
- .indicator {
- color: #888888;
- font-size: 42px;
- padding-top: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-## Refresh Components
+## Styles
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+ - Support all common styles, check out [common styles](../common/common-style)
-### Child Components
+## Events
-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.
+### `onrefresh`
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
+ - Triggered when the scroller or list has been pulled down.
-### Attributes
-* display has value of show or hide, default value is show.
+### `onpullingdown` <span class="weex-version">v0.6.1+</span>
-Other attributes please check out the [common attributes](../common-attrs.html).
+ - Triggered when the scroller or list has been pulled down. you can get `dy`, `pullingDistance`, `viewHeight` and `type` from onpullingdown `event` object :
+ - `dy` : The offset between two scroll actions
+ - `pullingDistance` : The distance of pulling
+ - `viewHeight` : The height of refreshView
+ - `type` : "pullingdown" constant string type for this event
-### Styles
-common styles: check out [common styles for components](../common-style.html)
-### Events
-* `onrefresh`: triggered when the scroller has been pulled down
-* `onpullingdown`: triggered when the scroller has been pulled down. you can get `dy, pullingDistance, viewHeight, type` from onpullingdown event object.
+ - Simple example :
- ```
- dy: the differencen between two scroll actions
- pullingDistance: the distance of pulling
- viewHeight: the height of refreshView
- type: "pullingdown" constant string type for this event
- ```
-
-### Restrictions
-
-* refresh/loading does not support remove action, may support in Weex 0.9.
-* 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.
-
-### example
-
-```html
-<template>
- <scroller class="scroller">
- <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
- <text class="indicator">Refreshing ...</text>
- </refresh>
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- </scroller>
-</template>
+```
+<scroller>
+ <refresh @refresh="onrefresh" @pullingdown="onpullingdown">
+ ...
+ </refresh>
+ ...
+</scroller>
<script>
- const modal = weex.requireModule('modal')
-
export default {
- data () {
- return {
- refreshing: false,
- lists: [1, 2, 3, 4, 5]
- }
- },
methods: {
onrefresh (event) {
- console.log('is refreshing')
- modal.toast({ message: 'refresh', duration: 1 })
- this.refreshing = true
- setTimeout(() => {
- this.refreshing = false
- }, 2000)
+ ...
},
onpullingdown (event) {
- console.log('is onpulling down')
- modal.toast({ message: 'pulling down', duration: 1 })
+ console.log("dy: " + event.dy)
+ console.log("pullingDistance: " + event.pullingDistance)
+ console.log("viewHeight: " + event.viewHeight)
+ console.log("type: " + type)
}
}
}
</script>
-
-<style scoped>
- .indicator {
- color: #888888;
- font-size: 42px;
- text-align: center;
- }
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
+
+## Usage Notes
+
+ - On the Android platform, it is not allowed for the refresh view to be pushed back when it is been pulling down or its onrefresh event is tiggered, while it is allow as for iOS platform and HTML5.
--- End diff --
There is a restriction on Android platform that the refresh view cannot be pushed back during the pulling down process or the`onrefresh` event is triggered, while it is allowed both on iOS and HTML5.
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258647
--- 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.
--- End diff --
The visibility of refresh component can be controlled by display attribute with the value `show` and `hide`. A `display="show"` should always be paired with a `display="hide"` statement.
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258888
--- 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 :
-```html
+```
<template>
- <scroller class="scroller">
- <div class="cell" v-for="num in lists">
- <div class="panel">
- <text class="text">{{num}}</text>
- </div>
- </div>
- <loading class="loading" @loading="onloading" :display="showLoading">
- <text class="indicator">Loading ...</text>
- </loading>
- </scroller>
+ <list>
+ <refresh @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
+ ...
+ </refresh>
+ ...
+ </list>
</template>
<script>
- const modal = weex.requireModule('modal')
- const LOADMORE_COUNT = 4
-
- export default {
- data () {
- return {
- showLoading: 'hide',
- lists: [1, 2, 3, 4, 5]
- }
+ ...
+ methods: {
+ onrefresh (event) {
+ this.refreshing = true
+ setTimeout(() => {
+ this.refreshing = false
+ }, 2000)
},
- methods: {
- onloading (event) {
- modal.toast({ message: 'loading', duration: 1 })
- this.showLoading = 'show'
- setTimeout(() => {
- const length = this.lists.length
- for (let i = length; i < length + LOADMORE_COUNT; ++i) {
- this.lists.push(i + 1)
- }
- this.showLoading = 'hide'
- }, 1500)
- }
- }
}
</script>
-
-<style scoped>
- .panel {
- width: 600px;
- height: 250px;
- margin-left: 75px;
- margin-top: 35px;
- margin-bottom: 35px;
- flex-direction: column;
- justify-content: center;
- border-width: 2px;
- border-style: solid;
- border-color: #DDDDDD;
- background-color: #F5F5F5;
- }
- .text {
- font-size: 50px;
- text-align: center;
- color: #41B883;
- }
- .loading {
- justify-content: center;
- }
- .indicator {
- color: #888888;
- font-size: 42px;
- padding-top: 20px;
- padding-bottom: 20px;
- text-align: center;
- }
-</style>
```
+ - Complete example goes [here](http://dotwe.org/vue/26937c1c74022e79608af118b21bfbc7)
-## Refresh Components
+## Styles
-To be rendered properly, the refresh/loading Components must appear inside the Scroller Component or the List Component.
+ - Support all common styles, check out [common styles](../common/common-style)
-### Child Components
+## Events
-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.
+### `onrefresh`
-* loading-indicator is a child component implemented with default animation effect for the refresh component.
+ - Triggered when the scroller or list has been pulled down.
-### Attributes
-* display has value of show or hide, default value is show.
+### `onpullingdown` <span class="weex-version">v0.6.1+</span>
-Other attributes please check out the [common attributes](../common-attrs.html).
+ - Triggered when the scroller or list has been pulled down. you can get `dy`, `pullingDistance`, `viewHeight` and `type` from onpullingdown `event` object :
--- End diff --
is pulled down.
The attributes `dy`... are accessible from the `event` object:
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
Github user jondong commented on a diff in the pull request:
https://github.com/apache/incubator-weex-site/pull/7#discussion_r149258305
--- 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.
--- End diff --
Collapse the refresh view. It also hides the loading-indicator and stops the loading animation if there's a loading-indicator included in the refresh component.
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
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:
---
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
Posted by jondong <gi...@git.apache.org>.
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.
---