[
https://issues.apache.org/jira/browse/WEEX-86?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16241372#comment-16241372
]
ASF GitHub Bot commented on WEEX-86:
------------------------------------
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.
> Reorganize the structure of documents and website
> -------------------------------------------------
>
> Key: WEEX-86
> URL: https://issues.apache.org/jira/browse/WEEX-86
> Project: Weex
> Issue Type: Improvement
> Components: Project
> Reporter: Hanks Zhang
> Assignee: zhengshihan
>
> h1. Weex Document Index
> + contributing.md
> + development-process.md
> + who-is-using-weex.md
> + releasenote.md
> + resources.md
> h2. Guide
> + index.md
> + advanced
> + app-architecture.md
> + downgrade.md
> + page-architecture.md
> + path.md
> + use-vuex-and-vue-router.md
> + extend-android.md
> + extend-ios.md
> + extend-js-framework.md
> + extend-web-render.md
> + front-end-frameworks.md
> + integrate-devtool-to-android.md
> + integrate-devtool-to-ios.md
> + integrate-to-your-app.md
> + set-up-env.md
> + using-rax.md
> + using-vue.md
> h2. References
> + index.md
> + android-apis.md
> + ios-apis.md
> + js-framework-apis.md
> + js-service.md
> + weex-variable.md
> h3. Components
> + a.md
> + cell.md
> + div.md
> + image.md
> + indicator.md
> + input.md
> + list.md
> + loading.md
> + refresh.md
> + scroller.md
> + slider.md
> + switch.md
> + text.md
> + textarea.md
> + video.md
> + waterfall.md
> + web.md
> h3. Modules
> + animation.md
> + clipboard.md
> + dom.md
> + globalevent.md
> + meta.md
> + modal.md
> + navigator.md
> + picker.md
> + storage.md
> + stream.md
> + websocket.md
> + webview.md
> h2. WiKi
> + color-names.md
> + common-events.md
> + common-styles.md
> + css-units.md
> + design-principles.md
> + event-bubble.md
> + faq.md
> + gestures.md
> + index.md
> + platform-difference.md
> + text-styles.md
> h2. Tools
> + helpers.md
> + index.md
> + market.md
> + toolkit.md
--
This message was sent by Atlassian JIRA
(v6.4.14#64029)
