| <!DOCTYPE html> |
| <html lang="en-US"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title><waterfall> | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/61.b54b9195.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/113.b1c17feb.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/160.2a970224.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/25.e9877e57.js"><link rel="prefetch" href="/assets/js/26.8905d6a0.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/81.03d1925e.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/88.e9171a32.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/components/waterfall.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/components/waterfall.html" class="nav-link">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/components/waterfall.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/components/waterfall.html" class="nav-link">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>API</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/api/weex-variable.html" class="sidebar-link">Weex Variable</a></li><li><a href="/docs/api/android-apis.html" class="sidebar-link">Android APIs</a></li><li><a href="/docs/api/ios-apis.html" class="sidebar-link">iOS APIs</a></li><li><a href="/docs/api/js-service.html" class="sidebar-link">JS Service</a></li><li><a href="/docs/api/broadcast-channel.html" class="sidebar-link">BroadcastChannel</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Built-in Components</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/components/a.html" class="sidebar-link"><a></a></li><li><a href="/docs/components/div.html" class="sidebar-link"><div></a></li><li><a href="/docs/components/text.html" class="sidebar-link"><text></a></li><li><a href="/docs/components/image.html" class="sidebar-link"><image></a></li><li><a href="/docs/components/list.html" class="sidebar-link"><list></a></li><li><a href="/docs/components/cell.html" class="sidebar-link"><cell></a></li><li><a href="/docs/components/loading.html" class="sidebar-link"><loading></a></li><li><a href="/docs/components/refresh.html" class="sidebar-link"><refresh></a></li><li><a href="/docs/components/recycle-list.html" class="sidebar-link"><recycle-list></a></li><li><a href="/docs/components/scroller.html" class="sidebar-link"><scroller></a></li><li><a href="/docs/components/slider.html" class="sidebar-link"><slider></a></li><li><a href="/docs/components/indicator.html" class="sidebar-link"><indicator></a></li><li><a href="/docs/components/textarea.html" class="sidebar-link"><textarea></a></li><li><a href="/docs/components/input.html" class="sidebar-link"><input></a></li><li><a href="/docs/components/waterfall.html" class="active sidebar-link"><waterfall></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#summary" class="sidebar-link">Summary</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#child-components" class="sidebar-link">Child Components</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#styles" class="sidebar-link">Styles</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#api" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#vue-example" class="sidebar-link">Vue Example</a></li><li class="sidebar-sub-header"><a href="/docs/components/waterfall.html#rax-example" class="sidebar-link">Rax Example</a></li></ul></li><li><a href="/docs/components/video.html" class="sidebar-link"><video></a></li><li><a href="/docs/components/web.html" class="sidebar-link"><web></a></li><li><a href="/docs/components/richtext.html" class="sidebar-link"><richtext></a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Built-in Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/animation.html" class="sidebar-link">animation</a></li><li><a href="/docs/modules/clipboard.html" class="sidebar-link">clipboard</a></li><li><a href="/docs/modules/dom.html" class="sidebar-link">dom</a></li><li><a href="/docs/modules/globalEvent.html" class="sidebar-link">globalEvent</a></li><li><a href="/docs/modules/meta.html" class="sidebar-link">meta</a></li><li><a href="/docs/modules/modal.html" class="sidebar-link">modal</a></li><li><a href="/docs/modules/navigator.html" class="sidebar-link">navigator</a></li><li><a href="/docs/modules/picker.html" class="sidebar-link">picker</a></li><li><a href="/docs/modules/storage.html" class="sidebar-link">storage</a></li><li><a href="/docs/modules/stream.html" class="sidebar-link">stream</a></li><li><a href="/docs/modules/webview.html" class="sidebar-link">webview</a></li><li><a href="/docs/modules/websockets.html" class="sidebar-link">webSockets</a></li><li><a href="/docs/modules/deviceInfo.html" class="sidebar-link">deviceInfo</a></li><li><a href="/docs/modules/console-log.html" class="sidebar-link">console-log</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Styles</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/styles/common-styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/docs/styles/text-styles.html" class="sidebar-link">Text Styles</a></li><li><a href="/docs/styles/css-units.html" class="sidebar-link">CSS Units</a></li><li><a href="/docs/styles/color-name.html" class="sidebar-link">Color name</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Events</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/events/common-events.html" class="sidebar-link">Common Events</a></li><li><a href="/docs/events/event-bubbling.html" class="sidebar-link">Event Bubble</a></li><li><a href="/docs/events/gesture.html" class="sidebar-link">Gesture</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="waterfall"><a href="#waterfall" class="header-anchor">#</a> <waterfall></h1><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p><code><waterfall></code> is only supported on Android and iOS, and is not supported on web.</p></div><h2 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h2><p>A component providing waterfall layout over list component.</p><h2 id="child-components"><a href="#child-components" class="header-anchor">#</a> Child Components</h2><p>Notes: The waterfall only supports the following child components: cell, header, refresh, loading and fixed-position components. Other kinds of components will not be guaranteed to be displayed correctly.</p><ul><li>cell: presents the content for a single data item in waterfall</li><li>header: components that need to stretch across multiple columns. It can be sticky by using css position.</li></ul><h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2><ul><li><strong>column-width</strong> : This property describes the width of columns in waterfall elements. |
| <ul><li><code>auto</code>: means that the column width will be determined by other properties(e.g., column-count, if it has a non-auto value).</li><li><code><length></code>: describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.</li></ul></li><li><strong>column-count</strong>:This property describes the number of columns of a multicol element. |
| <ul><li><code>auto</code>: means that the number of columns will be determined by other properties (e.g., column-width, if it has a non-auto value).</li><li><code><integer></code>: describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both column-width and column-count have non-auto values, the integer value describes the maximum number of columns.</li></ul></li><li><strong>column-gap</strong>:sets the gap between columns. if <code>normal</code> is specified, the gap will be <code>32</code>.</li><li><strong>left-gap</strong>:sets the gap between left edge and left cell. if <code>none</code> is specified, the gap will be <code>0</code><span class="api-version">v0.19+</span>.</li><li><strong>right-gap</strong>:sets the gap between right edge and right most cell. if <code>none</code> is specified, the gap will be <code>0</code><span class="api-version">v0.19+</span>.</li></ul><p>To see other attributes in list, please checkout <a href="/docs/components/list.html">List Component Attributes</a></p><h2 id="styles"><a href="#styles" class="header-anchor">#</a> Styles</h2><p>common styles: check out <a href="/docs/styles/common-styles.html">common styles for components</a></p><ul><li>support flexbox related styles</li><li>support box model related styles</li><li>support position related styles</li><li>support opacity, background-color etc.</li></ul><h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2><p>common events: check out the <a href="/docs/events/common-events.html">common events</a></p><ul><li>support onclick event. Check out <a href="/docs/events/common-events.html">common events</a></li><li>support onappear / ondisappear event. Check out <a href="/docs/events/common-events.html">common events</a></li></ul><h2 id="api"><a href="#api" class="header-anchor">#</a> API</h2><p>All subcomponents in waterfall support the scrollToElement API in <a href="/docs/modules/dom.html">dom module</a></p><h2 id="vue-example"><a href="#vue-example" class="header-anchor">#</a> Vue Example</h2><p><a href="http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0" target="_blank" rel="noopener noreferrer">waterfall example<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h2 id="rax-example"><a href="#rax-example" class="header-anchor">#</a> Rax Example</h2><p><code>rax-waterfall</code> is the component <code><waterfall></code> of rax, which can run in web and weex.</p><div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createElement<span class="token punctuation">,</span> useState<span class="token punctuation">,</span> useRef<span class="token punctuation">,</span> render <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rax'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> View <span class="token keyword">from</span> <span class="token string">'rax-view'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> Text <span class="token keyword">from</span> <span class="token string">'rax-text'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> Driver <span class="token keyword">from</span> <span class="token string">"driver-universal"</span> |
| <span class="token keyword">import</span> RefreshControl <span class="token keyword">from</span> <span class="token string">'rax-refreshcontrol'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> Waterfall <span class="token keyword">from</span> <span class="token string">'rax-waterfall'</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">550</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">624</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">708</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">600</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">550</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">624</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">708</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">600</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">let</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| |
| <span class="token keyword">let</span> <span class="token punctuation">[</span>refreshing<span class="token punctuation">,</span> setRefreshing<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token keyword">let</span> <span class="token function-variable function">handleRefresh</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">if</span> <span class="token punctuation">(</span>refreshing<span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token function">setRefreshing</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token function">setRefreshing</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| <span class="token keyword">let</span> <span class="token function-variable function">loadMore</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'load more'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| |
| <span class="token keyword">return</span> <span class="token punctuation">(</span> |
| <span class="token operator"><</span>Waterfall |
| columnWidth<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">370</span><span class="token punctuation">}</span> |
| columnCount<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span> |
| columnGap<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span> |
| dataSource<span class="token operator">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span> |
| renderHeader<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">[</span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RefreshControl</span></span> |
| <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> |
| <span class="token attr-name">refreshing</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>refreshing<span class="token punctuation">}</span></span> |
| <span class="token attr-name">onRefresh</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleRefresh<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> |
| </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">RefreshControl</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"> |
| </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">RefreshControl</span></span><span class="token punctuation">></span></span><span class="token punctuation">,</span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> |
| height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> |
| backgroundColor<span class="token punctuation">:</span> <span class="token string">'#efefef'</span><span class="token punctuation">,</span> |
| marginBottom<span class="token punctuation">:</span> <span class="token number">10</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Header Mod</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span> |
| <span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span> |
| renderFooter<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">750</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#efefef'</span><span class="token punctuation">,</span> marginTop<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Footer Mod</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span> |
| renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> <span class="token punctuation">(</span> |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> |
| height<span class="token punctuation">:</span> item<span class="token punctuation">.</span>height<span class="token punctuation">,</span> |
| backgroundColor<span class="token punctuation">:</span> <span class="token string">'#efefef'</span><span class="token punctuation">,</span> |
| marginBottom<span class="token punctuation">:</span> <span class="token number">10</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> |
| </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>index<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"> |
| </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span> |
| <span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">}</span> |
| onEndReached<span class="token operator">=</span><span class="token punctuation">{</span>loadMore<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> |
| <span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span> |
| |
| <span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> <span class="token punctuation">{</span> driver<span class="token punctuation">:</span> Driver <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><p><a href="https://rax.js.org/docs/components/waterfall" target="_blank" rel="noopener noreferrer">rax-waterfall doc<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/docs/components/input.html" class="prev"> |
| <input> |
| </a></span><span class="next"><a href="/docs/components/video.html"> |
| <video> |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">12/10/2020</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/docs/components/waterfall.md" target="_blank" rel="noopener noreferrer">Edit this page</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">Suggest</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">Excellent doc</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">Unusable doc</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/61.b54b9195.js" defer></script> |
| </body> |
| </html> |
