You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by cxfeng1 <gi...@git.apache.org> on 2017/12/18 09:57:58 UTC
[GitHub] incubator-weex-site pull request #7: [WEEX-86][doc] Update refresh component...
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'
---