| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title><recycle-list> | 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/133.cbdd35c7.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/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/61.b54b9195.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="/zh/" 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="/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/zh/docs/" class="nav-link router-link-active">文档</a></div><div class="nav-item"><a href="/zh/tools/" class="nav-link">第三方工具</a></div><div class="nav-item"><a href="/zh/download/" class="nav-link">下载</a></div><div class="nav-item"><a href="/zh/community/" class="nav-link">社区</a></div><div class="nav-item"><a href="/zh/blog/" class="nav-link">博客</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/components/recycle-list.html" class="nav-link">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/components/recycle-list.html" class="nav-link router-link-exact-active router-link-active">简体中文</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="/zh/guide/" class="nav-link">指南</a></div><div class="nav-item"><a href="/zh/docs/" class="nav-link router-link-active">文档</a></div><div class="nav-item"><a href="/zh/tools/" class="nav-link">第三方工具</a></div><div class="nav-item"><a href="/zh/download/" class="nav-link">下载</a></div><div class="nav-item"><a href="/zh/community/" class="nav-link">社区</a></div><div class="nav-item"><a href="/zh/blog/" class="nav-link">博客</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">选择语言</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/docs/components/recycle-list.html" class="nav-link">English</a></li><li class="dropdown-item"><!----><a href="/zh/docs/components/recycle-list.html" class="nav-link router-link-exact-active router-link-active">简体中文</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="/zh/docs/api/weex-variable.html" class="sidebar-link">Weex 环境变量</a></li><li><a href="/zh/docs/api/android-apis.html" class="sidebar-link">Android 接口</a></li><li><a href="/zh/docs/api/ios-apis.html" class="sidebar-link">iOS 接口</a></li><li><a href="/zh/docs/api/js-service.html" class="sidebar-link">JS 服务</a></li><li><a href="/zh/docs/api/broadcast-channel.html" class="sidebar-link">跨页面通信</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>内置组件</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/components/a.html" class="sidebar-link"><a></a></li><li><a href="/zh/docs/components/div.html" class="sidebar-link"><div></a></li><li><a href="/zh/docs/components/text.html" class="sidebar-link"><text></a></li><li><a href="/zh/docs/components/image.html" class="sidebar-link"><image></a></li><li><a href="/zh/docs/components/list.html" class="sidebar-link"><list></a></li><li><a href="/zh/docs/components/cell.html" class="sidebar-link"><cell></a></li><li><a href="/zh/docs/components/loading.html" class="sidebar-link"><loading></a></li><li><a href="/zh/docs/components/refresh.html" class="sidebar-link"><refresh></a></li><li><a href="/zh/docs/components/recycle-list.html" class="active sidebar-link"><recycle-list></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/zh/docs/components/recycle-list.html#简介" class="sidebar-link">简介</a></li><li class="sidebar-sub-header"><a href="/zh/docs/components/recycle-list.html#子组件" class="sidebar-link">子组件</a></li><li class="sidebar-sub-header"><a href="/zh/docs/components/recycle-list.html#属性" class="sidebar-link">属性</a></li><li class="sidebar-sub-header"><a href="/zh/docs/components/recycle-list.html#可复用的组件" class="sidebar-link">可复用的组件</a></li><li class="sidebar-sub-header"><a href="/zh/docs/components/recycle-list.html#注意事项" class="sidebar-link">注意事项</a></li><li class="sidebar-sub-header"><a href="/zh/docs/components/recycle-list.html#示例" class="sidebar-link">示例</a></li></ul></li><li><a href="/zh/docs/components/scroller.html" class="sidebar-link"><scroller></a></li><li><a href="/zh/docs/components/slider.html" class="sidebar-link"><slider></a></li><li><a href="/zh/docs/components/indicator.html" class="sidebar-link"><indicator></a></li><li><a href="/zh/docs/components/textarea.html" class="sidebar-link"><textarea></a></li><li><a href="/zh/docs/components/input.html" class="sidebar-link"><input></a></li><li><a href="/zh/docs/components/waterfall.html" class="sidebar-link"><waterfall></a></li><li><a href="/zh/docs/components/video.html" class="sidebar-link"><video></a></li><li><a href="/zh/docs/components/web.html" class="sidebar-link"><web></a></li><li><a href="/zh/docs/components/richtext.html" class="sidebar-link"><richtext></a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>内置模块</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/modules/animation.html" class="sidebar-link">animation</a></li><li><a href="/zh/docs/modules/clipboard.html" class="sidebar-link">clipboard</a></li><li><a href="/zh/docs/modules/dom.html" class="sidebar-link">dom</a></li><li><a href="/zh/docs/modules/globalEvent.html" class="sidebar-link">globalEvent</a></li><li><a href="/zh/docs/modules/meta.html" class="sidebar-link">meta</a></li><li><a href="/zh/docs/modules/modal.html" class="sidebar-link">modal</a></li><li><a href="/zh/docs/modules/navigator.html" class="sidebar-link">navigator</a></li><li><a href="/zh/docs/modules/picker.html" class="sidebar-link">picker</a></li><li><a href="/zh/docs/modules/storage.html" class="sidebar-link">storage</a></li><li><a href="/zh/docs/modules/stream.html" class="sidebar-link">stream</a></li><li><a href="/zh/docs/modules/webview.html" class="sidebar-link">webview</a></li><li><a href="/zh/docs/modules/websockets.html" class="sidebar-link">webSockets</a></li><li><a href="/zh/docs/modules/deviceInfo.html" class="sidebar-link">deviceInfo</a></li><li><a href="/zh/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>样式</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/styles/common-styles.html" class="sidebar-link">通用样式</a></li><li><a href="/zh/docs/styles/text-styles.html" class="sidebar-link">文本样式</a></li><li><a href="/zh/docs/styles/css-units.html" class="sidebar-link">CSS 单位</a></li><li><a href="/zh/docs/styles/color-name.html" class="sidebar-link">颜色值</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>事件</span><!----></p><ul class="sidebar-group-items"><li><a href="/zh/docs/events/common-events.html" class="sidebar-link">通用事件</a></li><li><a href="/zh/docs/events/event-bubbling.html" class="sidebar-link">事件冒泡</a></li><li><a href="/zh/docs/events/gesture.html" class="sidebar-link">手势</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h1 id="recycle-list"><a href="#recycle-list" class="header-anchor">#</a> <recycle-list> <span class="badge warning top">v0.18+</span></h1><h2 id="简介"><a href="#简介" class="header-anchor">#</a> 简介</h2><p><code><recycle-list></code> 是一个新的支持竖向或横向的列表容器，具有回收和复用的能力，可以大幅优化内存占用和渲染性能。</p><blockquote><ul><li>设计思路请参考 <a href="https://github.com/Hanks10100/weex-native-directive/blob/master/Design.md" target="_blank" rel="noopener noreferrer">Design.md<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>，具体的实现细节请参考 <a href="https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md" target="_blank" rel="noopener noreferrer">Implementation.md<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></li><li>该功能部分依赖于编译工具，请确保 weex-loader 的版本升级到最新（v0.7.2+）</li><li>使用最新版的 playground app（SDK 版本 0.18.0 及以上）才可以扫码查看原生效果，也可以直接使用dotwe查看Web预览效果</li></ul></blockquote><h2 id="子组件"><a href="#子组件" class="header-anchor">#</a> 子组件</h2><p><code><recycle-list></code> 只能使用 <code><cell-slot></code> 作为其直接子节点，使用其他节点无效。</p><h3 id="cell-slot"><a href="#cell-slot" class="header-anchor">#</a> <cell-slot></h3><p><code><cell-slot></code> 代表的是列表每一项的模板，它只用来描述模板的结构，并不对应实际的节点。<code><cell-slot></code> 的个数只表示模板的种类数，真实列表项的个数是由数据决定的。</p><table><thead><tr><th>属性</th><th style="width: 90%">说明</th></tr></thead><tbody><tr><td>case</td><td>声明了当前模板的类型，只有和数据中的类型与当前类型匹配时才会渲染，语义和编程语言里的 <code>case</code> 一致。<br>所有模板中最多只会匹配到一项，按照模板的顺序从上到下匹配，一旦匹配成功就不在继续匹配下一个。</td></tr><tr><td>default</td><td>表示当前模板为默认模板类型，不需要指定值。如果数据项没有匹配到任何 <code>case</code> 类型，则渲染带有 <code>default</code> 模板。如果存在多个 <code>default</code>，则只会使用第一个默认模板。</td></tr><tr><td>key</td><td>可选属性，用于指定列表数据中可以作为唯一标识的键值，可以优化渲染性能。</td></tr></tbody></table> | |
| - warning 属性的省略 | |
| - 如果没写 `switch`，无论有没有写 `case` 或 `default`，都只使用第一个模板 | |
| - 在写了 `switch` 的情况下，`case` 和 `default` 必须写一个，否则该模板将会被忽略 | |
| <h2 id="属性"><a href="#属性" class="header-anchor">#</a> 属性</h2><ul><li><code>for</code><br> | |
| 在 <code><recycle-list></code> 添加 <code>for</code> 属性即可描述如何循环展开列表的数据，语法和 Vue 的 <code>v-for</code> 指令类似，但是它循环的是自己内部的子节点，并不是当前节点。写法： | |
| <ul><li><code>alias in expression</code></li><li><code>(alias, index) in expression</code></li></ul></li><li><code>switch</code><br> | |
| 在 <code><recycle-list></code> 添加 <code>switch</code> 属性可以用来指定数据中用于区分子模板类型的字段名，语义和编程语言里的 switch 一致，配合 <code><cell-slot></code> 中的 <code>case</code> 和 <code>default</code> 属性一起使用。<br>如果省略了 <code>switch</code> 属性，则只会将第一个 <code><cell-slot></code> 视为模板，多余的模板将会被忽略。</li></ul><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>recycle-list</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(item, i) in longList<span class="token punctuation">"</span></span> <span class="token attr-name">switch</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>type<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>cell-slot</span> <span class="token attr-name">case</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A<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>text</span><span class="token punctuation">></span></span>- A {{i}} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cell-slot</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cell-slot</span> <span class="token attr-name">case</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>B<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>text</span><span class="token punctuation">></span></span>- B {{i}} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cell-slot</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>recycle-list</span><span class="token punctuation">></span></span> | |
| </code></pre></div><ul><li><code>scrollDirection</code><br> | |
| 取值vertical或horizontal</li></ul><h2 id="可复用的组件"><a href="#可复用的组件" class="header-anchor">#</a> 可复用的组件</h2><p>在 <code><recycle-list></code> 中使用的子组件也将被视为模板，在开发组件时给 <code><template></code> 标签添加 recyclable 属性，才可以用在 <code><recycle-list></code> 中。</p><div class="language-vue extra-class"><div class="highlight-lines"><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">recyclable</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> | |
| <span class="token comment">// ...</span> | |
| </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> | |
| </code></pre></div><blockquote><p>添加了 <code>recyclable</code> 属性并不会影响组件本身的功能，它仍然可以用在其他正常的组件里。</p></blockquote><h2 id="注意事项"><a href="#注意事项" class="header-anchor">#</a> 注意事项</h2><h3 id="属性和文本的绑定"><a href="#属性和文本的绑定" class="header-anchor">#</a> 属性和文本的绑定</h3><p>绑定属性或者文本时，仅支持表达式，不支持函数调用，也不支持使用 filter，可以参考 <a href="https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md#%E6%94%AF%E6%8C%81%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F" target="_blank" rel="noopener noreferrer">Implementation.md#支持的表达式<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><p>例如，下列写法不可用：</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">:prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>capitalize(card.title)<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>text</span><span class="token punctuation">></span></span>{{ card.title | capitalize }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> | |
| </code></pre></div><p>针对这种场景，推荐使用 <a href="https://vuejs.org/v2/guide/computed.html" target="_blank" rel="noopener noreferrer">computed<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> 属性来实现。<br> | |
| 因为模板的取值是由客户端实现的，而函数的定义在前端（filter 可以认为是在模板里调用函数的语法糖），如果每次取值都走一次通信的话，会大幅降低渲染性能。</p><h3 id="slot-不可用"><a href="#slot-不可用" class="header-anchor">#</a><code><slot></code>不可用</h3><p><code><cell-slot></code> 的功能和 <code><slot></code> 有部分重叠，而且更为激进，在概念上有冲突，存在很多边界情况无法完全支持。不要在 <code><cell-slot></code> 及其子组件里使用 <code><slot></code>。</p><h3 id="v-once-不会优化渲染性能"><a href="#v-once-不会优化渲染性能" class="header-anchor">#</a> v-once 不会优化渲染性能</h3><p>和前端框架中的理解不同，客户端里要实现复用的逻辑，会标记模板节点的状态，添加了 <code>v-once</code> 能保证节点只渲染一次，但是并不一定能优化渲染性能，反而可能会拖慢客户端复用节点时的比对效率。</p><h3 id="样式功能的限制"><a href="#样式功能的限制" class="header-anchor">#</a> 样式功能的限制</h3><p><em>计划支持</em>。目前版本里还不支持绑定样式类名（<code>v-bind:class</code>），原因和进展可以参考 <a href="https://github.com/Hanks10100/weex-native-directive/issues/14" target="_blank" rel="noopener noreferrer">#14<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><h3 id="双向绑定"><a href="#双向绑定" class="header-anchor">#</a> 双向绑定</h3><p><em>计划支持</em>。<code>v-model</code> 还未调通，暂时不要使用。</p><h3 id="子组件的限制"><a href="#子组件的限制" class="header-anchor">#</a> 子组件的限制</h3><ul><li><p>没有 Virtual DOM！ | |
| 使用在 <code><recycle-list></code> 中的组件没有 Virtual DOM！与 Virtual DOM 相关的功能也不支持。在开发过程中尽量只处理数据，不要操作生成后的节点。</p><p>下列这些属性都不再有意义，请不要使用：</p><ul><li><code>vm.$el</code></li><li><code>vm.$refs.xxx</code></li><li><code>vm.$vnode</code></li><li><code>vm.#slots</code></li><li><code>vm.#scopedSlots</code></li></ul><p><code>vm.$refs</code> 里的值可能是数组、子组件的实例、DOM 元素，在前端里比较常用，如果不支持，对 Weex 里的 <code>dom</code> 模块和 <code>animation</code> 模块的功能也有影响。</p><p>目前正在讨论技术方案，部分接口可能会重新设计，或者是在 <code>vm</code> 上透出专为 <code><recycle-list></code> 设计的接口。</p></li><li><p>组件的属性 | |
| 目前子组件的属性不支持函数。（正在讨论实现方案）</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sub-component</span> <span class="token attr-name">:prop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item.xxx<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> | |
| </code></pre></div><p>因为子组件的属性值需要在前端和客户端之间传递，所以仅支持可序列化的值。<code>item.xxx</code> 的类型可以是对象、数组、字符串、数字、布尔值等，不支持函数。</p></li><li><p>生命周期的行为差异 | |
| 由于列表的渲染存在回收机制，节点渲染与否也与用户的滚动行为有关，组件的生命周期行为会有一些不一致。</p><p>可回收长列表不会立即渲染所有节点，只有即将滚动到可视区域（以及可滚动的安全区域）内时才开始渲染，组件生命周期的语义没变，但是会延迟触发。</p><p>假设有 100 条数据，一条数据了对应一个组件。渲染首屏时只能展示 8 条数据的节点，那就只有前 8 个组件被创建了，也只有前 8 个组件的生命周期被触发。</p><ul><li>组件的 <code>beforeCreate</code> 和 <code>created</code> 也只有在组件即将创建和创建完成时才会触发</li><li>同理，组件的 <code>beforeMount</code> 和 <code>mounted</code> 也只有页面真正渲染到了该组件，在即将挂载和已经挂载时才会触发</li></ul></li><li><p>组件的自定义事件<br><em>计划支持</em>。<code>vm.$on</code>, <code>vm.$once</code>, <code>vm.$emit</code>, <code>vm.$off</code> 等功能还未完全调通，接口可用，但是行为可能有些差异（参数丢失），暂时不要使用。</p></li></ul><h2 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h2><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>recycle-list</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(item, i) in longList<span class="token punctuation">"</span></span> <span class="token attr-name">switch</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>type<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>cell-slot</span> <span class="token attr-name">case</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>A<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>text</span><span class="token punctuation">></span></span>- A {{i}} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cell-slot</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cell-slot</span> <span class="token attr-name">case</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>B<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>text</span><span class="token punctuation">></span></span>- B {{i}} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cell-slot</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>recycle-list</span><span class="token punctuation">></span></span> | |
| </code></pre></div><p>如果有如下数据：</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> longList <span class="token operator">=</span> <span class="token punctuation">[</span> | |
| <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> | |
| <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> | |
| <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> | |
| <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> | |
| <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span> | |
| <span class="token punctuation">]</span> | |
| </code></pre></div><p>则会生成如下等价节点：</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>- A 0 -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>- B 1 -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>- B 2 -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>- A 3 -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>- B 4 -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| </code></pre></div><p>如果将模板合并成一个，也可以省略 <code>switch</code> 和 <code>case</code>，将例子进一步简化：</p><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>recycle-list</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(item, i) in longList<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>cell-slot</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span><span class="token punctuation">></span></span>- {{item.type}} {{i}} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cell-slot</span><span class="token punctuation">></span></span> | |
| <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>recycle-list</span><span class="token punctuation">></span></span> | |
| </code></pre></div><p>更多示例：</p><p><strong>模板语法</strong></p><ul><li><a href="http://dotwe.org/vue/33688e1ad843fd2a1b9f1f27a3905b9c" target="_blank" rel="noopener noreferrer">绑定文本<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>（<a href="http://dotwe.org/vue/99e44cbc137d4e3ab841c88fedd91d7c" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/b4223fd71c93c89ba75a1876b0832772" target="_blank" rel="noopener noreferrer">绑定属性 <code>v-bind</code><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>（<a href="http://dotwe.org/vue/a43685d00842f0558857b7942a74621a" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/7e34f1998a0a04ff11d4c30727b3e1b6" target="_blank" rel="noopener noreferrer">循环 <code>v-for</code><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>（<a href="http://dotwe.org/vue/fbd22af052d8855a0da0d2eacee322e4" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/a633e1932c67f59a4c1a6b84aba7c2d0" target="_blank" rel="noopener noreferrer">多层循环<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>（<a href="http://dotwe.org/vue/3368f34c62d58b083e9e6de22acafe4d" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/96cc151e9798bfa43aa029767f66a68b" target="_blank" rel="noopener noreferrer">条件渲染 <code>v-if</code>/<code>v-else</code>/<code>v-else-if</code><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>（<a href="http://dotwe.org/vue/92bd285b3419f34fe16a72604e10b4ff" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/f3f72eb4e4e7b39223f174cf9a0d1875" target="_blank" rel="noopener noreferrer">绑定事件 <code>v-on</code><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>（<a href="http://dotwe.org/vue/88039631a296bd6d41271cd36727d914" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/fc6c08e80ebeebe4cde6f16af88eb3e8" target="_blank" rel="noopener noreferrer">一次性渲染 <code>v-once</code><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>（<a href="http://dotwe.org/vue/e2dde8bf1fa3d121eea824087181ee19" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/2bf86e5c2aaff1d1a0eec30abc3713b5" target="_blank" rel="noopener noreferrer">绑定样式<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>（<a href="http://dotwe.org/vue/db6d50253d88f7670a69cf0225d3c893" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/efeb1d42226b8b919df0a9a314ef0648" target="_blank" rel="noopener noreferrer">loadmore<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>（<a href="http://dotwe.org/vue/107b622dbf231a56b6da7ad49985bd17" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/dc9ef31c0304e7d1d27f0d0baa677b57" target="_blank" rel="noopener noreferrer">复杂压测例子<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>（<a href="http://dotwe.org/vue/da8361cd2f614a26e97ceec6316fe0d7" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/1a2f6cd2edcd2edcd3a6d9906b7cfd6a" target="_blank" rel="noopener noreferrer">无限列表<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>（<a href="http://dotwe.org/vue/6e6dceed2accc3be39c61fac58dc4440" target="_blank" rel="noopener noreferrer">普通list<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>）</li></ul><p><strong>使用子组件</strong></p><ul><li><a href="http://dotwe.org/vue/68e405753d8c3c2a8168185140ac08bb" target="_blank" rel="noopener noreferrer">纯静态子组件<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>（<a href="http://dotwe.org/vue/d7ea3addbd445d7ef51151f84af64c01" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/89c177e6336ad7789ef500bc2daf61bb" target="_blank" rel="noopener noreferrer">无状态，有 props<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>（<a href="http://dotwe.org/vue/451afc28c004b62cec9fa1c46e56c2d5" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/37056065a0a2c104e73dd550f252fabc" target="_blank" rel="noopener noreferrer">props 更新<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>（<a href="http://dotwe.org/vue/778e93001e573ea0bbe9fc332a6a1e6c" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/baeda092d257d91d8c9c216e91ba350a" target="_blank" rel="noopener noreferrer">有内部状态<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>（<a href="http://dotwe.org/vue/a6e19f26653c890544c1036a7e9d2722" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/c9ab8a26fb10fb163891ac58b2322671" target="_blank" rel="noopener noreferrer">computed & watch<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>（<a href="http://dotwe.org/vue/5e13c37f136fde456da311e5ddf17324" target="_blank" rel="noopener noreferrer">普通list<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>）</li><li><a href="http://dotwe.org/vue/c63e11f62c8f50d6120d56f97253a1b6" target="_blank" rel="noopener noreferrer">移除组件<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>（<a href="http://dotwe.org/vue/a9d299cbf2870c99b32df047ed0c4265" target="_blank" rel="noopener noreferrer">普通list<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>）</li></ul></div><div class="page-nav"><p class="inner"><span class="prev"> | |
| ← | |
| <a href="/zh/docs/components/refresh.html" class="prev"> | |
| <refresh> | |
| </a></span><span class="next"><a href="/zh/docs/components/scroller.html"> | |
| <scroller> | |
| </a> | |
| → | |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">上次更新: </span><span class="time">2020/12/10</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/zh/docs/components/recycle-list.md" target="_blank" rel="noopener noreferrer">编辑此页</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">提交建议</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">文档写得很棒</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">文档写得很差</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/133.cbdd35c7.js" defer></script> | |
| </body> | |
| </html> |