[WEEX-86][doc] Update loading component's document.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/commit/53d37f00 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/53d37f00 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/53d37f00 Branch: refs/heads/master Commit: 53d37f00c6a7bb8b45076e30faaffd30b7a9df27 Parents: 27c2ab2 Author: miomin <[email protected]> Authored: Thu Jan 18 14:53:41 2018 +0800 Committer: miomin <[email protected]> Committed: Thu Jan 18 14:53:41 2018 +0800 ---------------------------------------------------------------------- source/cn/references/components/loading.md | 174 ++++++++++-------------- source/references/components/loading.md | 106 +++++++++++++++ 2 files changed, 181 insertions(+), 99 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/53d37f00/source/cn/references/components/loading.md ---------------------------------------------------------------------- diff --git a/source/cn/references/components/loading.md b/source/cn/references/components/loading.md index 08db367..085b603 100644 --- a/source/cn/references/components/loading.md +++ b/source/cn/references/components/loading.md @@ -2,127 +2,103 @@ title: <loading> type: references group: å ç½®ç»ä»¶ -order: 8.08 +order: 8.09 version: 2.1 --- # <loading> -<span class="weex-version">v0.6.1+</span> +### <span class="weex-version">v0.6.1+</span> -`<loading>` 为 `<scroller>` å `<list>` æä¾ä¸æå è½½åè½ãç¨æ³ä¸ç¹æ§ä¸ `<refresh>` ç±»ä¼¼ï¼ æ¯ `<scroller>` å `<list>` çåç»ä»¶ï¼ä¸åªè½å¨è¢« `<scroller>` å `<list>` å å«æ¶æè½è¢«æ£ç¡®ç渲æã +`<loading>` 为容å¨æä¾ä¸æå è½½åè½ï¼ç¨æ³åå±æ§ä¸ `<refresh>` 类似ã +> **注æï¼**`<loading>` æ¯ `<scroller>`ã`<list>`ã`<hlist>`ã`<vlist>`ã`<waterfall>` çåç»ä»¶ï¼åªè½å¨è¢«å®ä»¬å å«æ¶æè½è¢«æ£ç¡®æ¸²æã + + - ç®å示ä¾ï¼ + +``` +<list> + ... + ... + <loading> + ... + </loading> +</list> +``` + - æ¥ç [å®æ´ç¤ºä¾](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) ## åç»ä»¶ -- [`<text>`](./text.html) -- [`<image>`](./image.html) -- `<loading-indicator>`: `<refresh>` å `<loading>` ç»ä»¶çåç»ä»¶ï¼æ¥æé»è®¤çå¨ç»ææçå®ç°ã + - è¯¸å¦ `<text>`ã`<image>` ä¹ç±»çä»»ä½ç»ä»¶ï¼é½å¯ä»¥æ¾å° `<loading>` è¿è¡æ¸²æã -## ç¹æ§ + - ç¹æ®åç»ä»¶ `<loading-indicator>`: åªè½ä½ä¸º `<refresh>` å `<loading>` çåç»ä»¶ä½¿ç¨ï¼æ¥æé»è®¤çå¨ç»ææå®ç°ã -- `display {string}`ï¼å¯éå¼ä¸º `show` æè `hide`ï¼ä» éè `<indicator>`ï¼`<loading>` å ¶ä»åç»ä»¶ä¾ç¶å¯è§ï¼`loading` äºä»¶ä»ä¼è¢«è§¦åã + - ç®å示ä¾ï¼ -## æ ·å¼ +``` +<loading> + <text>Loading</text> + <loading-indicator></loading-indicator> + ... +</loading> +``` + - æ¥ç [å®æ´ç¤ºä¾](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) -æ¯æææéç¨æ ·å¼ã +## å±æ§ -- ç模å -- `flexbox` å¸å± -- `position` -- `opacity` -- `background-color` +| å±æ§å | ç±»å | å¼ | é»è®¤å¼ | +| ------------- | ------ | -------------------------- | ------- | +| `display` | String | show / hide | show | -æ¥ç [ç»ä»¶éç¨æ ·å¼](../common-style.html) +### `display` -## äºä»¶ + - `show`ï¼å¦æ `<loading>` ä¸å å« `<loading-indicator>`ï¼åå°å ¶æ¾ç¤ºå¹¶å¼å§é»è®¤å¨ç»ã -- `loading`ï¼å è½½æ¶è¢«è§¦åã + - `hide`ï¼æ¶èµ· loading viewï¼å¦æ `<loading>` ä¸å å« `<loading-indicator>`ï¼åå°å ¶è§å¾éèã -## 约æ +> **注æï¼** `display` çè®¾ç½®å¿ é¡»æ对åºç°ï¼å³è®¾ç½® `display="show"`,å¿ é¡»æ对åºç `display="hide"`ã -- `<loading>` ä¸æ¯æ `remove`ï¼v0.9 çæ¬ä¼ä¿®å¤ã -- `display` å¼ä¸º `show` æ `hide`ãä» éè `<indicator>`ï¼`<loading>` å ¶ä»åç»ä»¶ä¾ç¶å¯è§ï¼`loading` äºä»¶ä»ä¼è¢«è§¦åã + - ç®å示ä¾ï¼ - å¦æéè¦ `<loading>` hide æ¶éèææ¡å¹¶ä¸å触åäºä»¶ï¼æ两ç§è§£å³æ¹æ³ï¼ + ``` + <template> + <list> + ... + ... + <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'"> + ... + </loading> + ... + </list> + </template> - 1. ä¿®æ¹æ示ææ¡ï¼å¹¶å¨ `loading` äºä»¶ä¸æ·»å å¤æé»è¾ï¼ - 2. v0.9+ å¯éè¿ `remove` 解å³ã + <script> + ... + methods: { + onloading (event) { + this.loadinging = true + setTimeout(() => { + this.loadinging = false + }, 2000) + }, + } + </script> + ``` + - æ¥ç [å®æ´ç¤ºä¾](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) -- åªè½éè¿ `display` ç¹æ§è¿è¡å±ç¤ºåéèï¼ä¸å¿ é¡»æ对åºç°ï¼å³è®¾ç½® `display="show"`,å¿ é¡»æ对åºç `display="hide"`ã + - æ¯æææéç¨å±æ§ãæ¥ç [ç»ä»¶éç¨å±æ§](../common-attrs.html) -## ç¤ºä¾ +## æ ·å¼ -```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> -</template> - -<script> - const modal = weex.requireModule('modal') - const LOADMORE_COUNT = 4 - - export default { - data () { - return { - showLoading: 'hide', - lists: [1, 2, 3, 4, 5] - } - }, - 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> -``` + - æ¯æææéç¨æ ·å¼ãæ¥ç [ç»ä»¶éç¨æ ·å¼](../common-style.html) + +## äºä»¶ + +### `loading` + + - å½ `<scroller>`ã`<list>`ã`<hlist>`ã`<vlist>`ã`<waterfall>` 被ä¸ææ¶è§¦åã + + - æ¥ç [å®æ´ç¤ºä¾](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) + +## ç¤ºä¾ -[Try it](http://dotwe.org/vue/d5c1b2336a703a6e6e47c303af41ffcd) + - [å®æ´ç¤ºä¾](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/53d37f00/source/references/components/loading.md ---------------------------------------------------------------------- diff --git a/source/references/components/loading.md b/source/references/components/loading.md new file mode 100644 index 0000000..fc4389e --- /dev/null +++ b/source/references/components/loading.md @@ -0,0 +1,106 @@ +--- +title: <loading> +type: references +group: Build-in Components +order: 8.09 +version: 2.1 +--- + +# <loading> + +### <span class="weex-version">v0.6.1+</span> + +The `<loading>` Component provide a pullup to loading function for some special containers, its usage and attributes are similar to the `<refresh>` Component. +> **Noteï¼** To be rendered properly, the `<loading>` Component must appear inside the special Component such as `<scroller>`ã`<list>`ã`<hlist>`ã`<vlist>`ã`<waterfall>`. + + - Example: + +``` +<list> + ... + ... + <loading> + ... + </loading> +</list> +``` + + - Complete example goes [here](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) + +## Child Components + + - Any other components, like the `<text>` and `<image>` components, can be put inside the loading component. + + - `<loading-indicator>`: This is a dedicated component which provides a default loading animation effect, can only be used inside the `<refresh>` or the `<loading>` components. + + - Example: + +``` +<loading> + <text>Loading</text> + <loading-indicator></loading-indicator> + ... +</loading> +``` + - Complete example goes [here](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) + +## Attributes + + - Support all common attributes, check out [common attributes](../common/common-attrs) + +| Attribute | Type | Value | Default Value | +| ------------- | ------ | -------------------------- | ------- | +| `display` | String | show / hide | show | + +#### `display` + + - `show`ï¼The loading animation will be started if a `<loading-indicator>` is included in the loading component. + + - `hide`ï¼Collapse the loading view. It also hides the `<loading-indicator>` and stops the loading animation if there's a `<loading-indicator>` included in the loading component. + +> **Noteï¼** The visibility of `<loading>` 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. + + - Example: + +``` +<template> + <list> + ... + ... + <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'"> + ... + </loading> + ... + </list> +</template> + +<script> + ... + methods: { + onloading (event) { + this.loadinging = true + setTimeout(() => { + this.loadinging = false + }, 2000) + }, + } +</script> +``` + - Complete example goes [here](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) + +## Styles + + - Please check out the [common styles](../common/common-style) + +## Events + +### `onloading` + + - Triggered when the scroller or list is pulled up. + + - Complete example goes [here](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164) + + +## Example + + - Complete example goes [here](http://dotwe.org/vue/d1f0283206f66fec6549f7896e6c6164)
