[WEEX-192][android]Weex Document List Document Update
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/e9292318 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/tree/e9292318 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex-site/diff/e9292318 Branch: refs/heads/master Commit: e9292318b99dc8f67e4c8ea607d9850d4d9a76bd Parents: 42138b4 Author: jianbai.gbj <[email protected]> Authored: Mon Mar 26 11:18:33 2018 +0800 Committer: jianbai.gbj <[email protected]> Committed: Mon Mar 26 11:18:33 2018 +0800 ---------------------------------------------------------------------- source/cn/references/components/list.md | 71 +++------------ source/cn/references/images/list_demo.jpg | Bin 0 -> 128304 bytes source/references/components/list.md | 118 +++---------------------- source/references/images/list_demo.jpg | Bin 0 -> 128304 bytes 4 files changed, 22 insertions(+), 167 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/e9292318/source/cn/references/components/list.md ---------------------------------------------------------------------- diff --git a/source/cn/references/components/list.md b/source/cn/references/components/list.md index 51df6b0..5926186 100644 --- a/source/cn/references/components/list.md +++ b/source/cn/references/components/list.md @@ -73,7 +73,15 @@ version: 2.1 - `x {number}`: xè½´ä¸çå移é - `y {number}`: yè½´ä¸çå移é - [ä½éªä¸ä¸](http://dotwe.org/bc445ede8746a31360e3607d210304c5) + [ç®å示ä¾](http://dotwe.org/vue/edd19cdf2f03fbe857b76fadd65a08c3) + +  + + [æ»å¨å 载示ä¾](http://dotwe.org/vue/2170622cc99895e5ad6af89d06355b84) + + [头é¨sticky示ä¾](http://dotwe.org/vue/2ecfe0a1c7b820c9d9c9965e1a8cde19) + + [cell appearäºä»¶](http://dotwe.org/vue/ce0e953112b132e5897725b3149f3924) - éç¨äºä»¶ @@ -111,63 +119,4 @@ version: 2.1 ## ç¤ºä¾ - -```html -<template> - <list class="list" @loadmore="fetch" loadmoreoffset="10"> - <cell class="cell" v-for="num in lists"> - <div class="panel"> - <text class="text">{{num}}</text> - </div> - </cell> - </list> -</template> - -<script> - const modal = weex.requireModule('modal') - const LOADMORE_COUNT = 4 - - export default { - data () { - return { - lists: [1, 2, 3, 4, 5] - } - }, - methods: { - fetch (event) { - modal.toast({ message: 'loadmore', duration: 1 }) - - setTimeout(() => { - const length = this.lists.length - for (let i = length; i < length + LOADMORE_COUNT; ++i) { - this.lists.push(i + 1) - } - }, 800) - } - } - } -</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: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .text { - font-size: 50px; - text-align: center; - color: #41B883; - } -</style> -``` - -[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38) +[æ»å¨å è½½](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38) http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/e9292318/source/cn/references/images/list_demo.jpg ---------------------------------------------------------------------- diff --git a/source/cn/references/images/list_demo.jpg b/source/cn/references/images/list_demo.jpg new file mode 100644 index 0000000..8a5a775 Binary files /dev/null and b/source/cn/references/images/list_demo.jpg differ http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/e9292318/source/references/components/list.md ---------------------------------------------------------------------- diff --git a/source/references/components/list.md b/source/references/components/list.md index deffbaa..3c93257 100644 --- a/source/references/components/list.md +++ b/source/references/components/list.md @@ -10,54 +10,19 @@ version: 2.1 <span class="weex-version">v0.6.1+</span> -The List component, which inherits from Scroller component, is a core component, and it provides the most popular features for using a list of items. +The List component, which inspired by Android RecyclerView, is a core component, and it provides the most popular features for using a list of items. which support vertical and horizontal list. It can provide excellent experience and performance while still maintaining smooth scroll and low memory usage. -**example** - -```html -<template> - <list class="list"> - <cell class="cell" v-for="num in lists"> - <div class="panel"> - <text class="text">{{num}}</text> - </div> - </cell> - </list> -</template> - -<script> - export default { - data () { - return { - lists: ['A', 'B', 'C', 'D', 'E'] - } - } - } -</script> - -<style scoped> - .panel { - width: 600px; - height: 300px; - margin-left: 75px; - margin-top: 35px; - margin-bottom: 35px; - flex-direction: column; - justify-content: center; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .text { - font-size: 88px; - text-align: center; - color: #41B883; - } -</style> -``` +[list simple demo](http://dotwe.org/vue/edd19cdf2f03fbe857b76fadd65a08c3) + + + +[list loadmore demo](http://dotwe.org/vue/2170622cc99895e5ad6af89d06355b84) + +[list sticky header](http://dotwe.org/vue/2ecfe0a1c7b820c9d9c9965e1a8cde19) + +[list cell appear event](http://dotwe.org/vue/ce0e953112b132e5897725b3149f3924) ### Child Components @@ -113,64 +78,5 @@ onloadmore is an event that will be triggered when the rest of the scroller/list Nested lists or scrollers within the same direction are not supported. In other words. nested lists/scroller must have different directions. For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal. -### Example - -```html -<template> - <list class="list" @loadmore="fetch" loadmoreoffset="10"> - <cell class="cell" v-for="num in lists"> - <div class="panel"> - <text class="text">{{num}}</text> - </div> - </cell> - </list> -</template> - -<script> - const modal = weex.requireModule('modal') - const LOADMORE_COUNT = 4 - - export default { - data () { - return { - lists: [1, 2, 3, 4, 5] - } - }, - methods: { - fetch (event) { - modal.toast({ message: 'loadmore', duration: 1 }) - - setTimeout(() => { - const length = this.lists.length - for (let i = length; i < length + LOADMORE_COUNT; ++i) { - this.lists.push(i + 1) - } - }, 800) - } - } - } -</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: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .text { - font-size: 50px; - text-align: center; - color: #41B883; - } -</style> -``` - -[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38) + +[load more demo](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38) http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/e9292318/source/references/images/list_demo.jpg ---------------------------------------------------------------------- diff --git a/source/references/images/list_demo.jpg b/source/references/images/list_demo.jpg new file mode 100644 index 0000000..8a5a775 Binary files /dev/null and b/source/references/images/list_demo.jpg differ
