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.
---
