Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
wicresoft
/
doc_project
2
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Tree: 9cd9c7d1d5
Branches Tags
doc_project
/
better-scroll-docs
/
zh-CN
/
plugins
/
wheel.html

wheel.html 250 KB
Lịch sử Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
    6. 

  6.     <title>wheel | BetterScroll 2.0</title>
    7. 

  7.     <meta name="generator" content="VuePress 1.9.10">
    8. 

  8.     <link rel="shortcut icon" href="/docs/assets/bs.ico" type="images/x-icon">
    9. 

  9.     <script src="https://www.googletagmanager.com/gtag/js?id=G-7E85TW7P27"></script>
    10. 

  10.     <script type="text/javascript">
    11. 

  11.       window.dataLayer = window.dataLayer || [];
    12. 

  12.       function gtag(){dataLayer.push(arguments);}
    13. 

  13.       gtag('js', new Date());
    14. 

  14.       gtag('config', 'G-7E85TW7P27');
    15. 

  15.     </script>
    16. 

  16.     <meta name="description" content="Make Scroll Perfect">
    17. 

  17.     
    18. 

  18.     <link rel="preload" href="/docs/assets/css/0.styles.0cd93813.css" as="style"><link rel="preload" href="/docs/assets/js/app.c71b64d3.js" as="script"><link rel="preload" href="/docs/assets/js/5.d6412664.js" as="script"><link rel="preload" href="/docs/assets/js/4.4855b9ef.js" as="script"><link rel="preload" href="/docs/assets/js/3.481632b4.js" as="script"><link rel="preload" href="/docs/assets/js/121.e41f8100.js" as="script"><link rel="preload" href="/docs/assets/js/56.cd04bae9.js" as="script"><link rel="preload" href="/docs/assets/js/7.518ccda7.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.8644db92.js"><link rel="prefetch" href="/docs/assets/js/10.6f8c38eb.js"><link rel="prefetch" href="/docs/assets/js/100.ee08226e.js"><link rel="prefetch" href="/docs/assets/js/101.fd2f3d9f.js"><link rel="prefetch" href="/docs/assets/js/102.79d86e3d.js"><link rel="prefetch" href="/docs/assets/js/103.7a3ae3b5.js"><link rel="prefetch" href="/docs/assets/js/104.7be4589d.js"><link rel="prefetch" href="/docs/assets/js/105.75386d15.js"><link rel="prefetch" href="/docs/assets/js/106.a4a18e8d.js"><link rel="prefetch" href="/docs/assets/js/107.561ec2e2.js"><link rel="prefetch" href="/docs/assets/js/108.1c61689f.js"><link rel="prefetch" href="/docs/assets/js/109.da71a73e.js"><link rel="prefetch" href="/docs/assets/js/110.5e0fa2d1.js"><link rel="prefetch" href="/docs/assets/js/111.1e326dd1.js"><link rel="prefetch" href="/docs/assets/js/112.590ba317.js"><link rel="prefetch" href="/docs/assets/js/113.cf201ace.js"><link rel="prefetch" href="/docs/assets/js/114.6d895ce2.js"><link rel="prefetch" href="/docs/assets/js/115.572aee19.js"><link rel="prefetch" href="/docs/assets/js/116.754722a0.js"><link rel="prefetch" href="/docs/assets/js/117.15e4dab3.js"><link rel="prefetch" href="/docs/assets/js/118.721d68f8.js"><link rel="prefetch" href="/docs/assets/js/119.c5c28d96.js"><link rel="prefetch" href="/docs/assets/js/120.12cd2e0e.js"><link rel="prefetch" href="/docs/assets/js/122.9ebe2f53.js"><link rel="prefetch" href="/docs/assets/js/123.f90c91f9.js"><link rel="prefetch" href="/docs/assets/js/13.b0c40cd7.js"><link rel="prefetch" href="/docs/assets/js/14.28bec126.js"><link rel="prefetch" href="/docs/assets/js/15.87b22af4.js"><link rel="prefetch" href="/docs/assets/js/16.c10e14e7.js"><link rel="prefetch" href="/docs/assets/js/17.5c921c77.js"><link rel="prefetch" href="/docs/assets/js/18.dc23b7e3.js"><link rel="prefetch" href="/docs/assets/js/19.a4034f95.js"><link rel="prefetch" href="/docs/assets/js/2.03f0f2c8.js"><link rel="prefetch" href="/docs/assets/js/20.8633fd45.js"><link rel="prefetch" href="/docs/assets/js/21.1fbf8d7e.js"><link rel="prefetch" href="/docs/assets/js/22.2888cfc5.js"><link rel="prefetch" href="/docs/assets/js/23.f951d302.js"><link rel="prefetch" href="/docs/assets/js/24.12842718.js"><link rel="prefetch" href="/docs/assets/js/25.5a5a3137.js"><link rel="prefetch" href="/docs/assets/js/26.88e81f0b.js"><link rel="prefetch" href="/docs/assets/js/27.152b8fda.js"><link rel="prefetch" href="/docs/assets/js/28.22550ea8.js"><link rel="prefetch" href="/docs/assets/js/29.f43fa807.js"><link rel="prefetch" href="/docs/assets/js/30.4ed38f67.js"><link rel="prefetch" href="/docs/assets/js/31.af4018f6.js"><link rel="prefetch" href="/docs/assets/js/32.930ee0b7.js"><link rel="prefetch" href="/docs/assets/js/33.c6a68c75.js"><link rel="prefetch" href="/docs/assets/js/34.6d10da1e.js"><link rel="prefetch" href="/docs/assets/js/35.11ba7b51.js"><link rel="prefetch" href="/docs/assets/js/36.8a54712b.js"><link rel="prefetch" href="/docs/assets/js/37.b26eb85d.js"><link rel="prefetch" href="/docs/assets/js/38.d6569a11.js"><link rel="prefetch" href="/docs/assets/js/39.1d22cfba.js"><link rel="prefetch" href="/docs/assets/js/40.577a94d7.js"><link rel="prefetch" href="/docs/assets/js/41.155e01e0.js"><link rel="prefetch" href="/docs/assets/js/42.3c26eaba.js"><link rel="prefetch" href="/docs/assets/js/43.d90991e2.js"><link rel="prefetch" href="/docs/assets/js/44.5437344c.js"><link rel="prefetch" href="/docs/assets/js/45.0d2eca0a.js"><link rel="prefetch" href="/docs/assets/js/46.11455b40.js"><link rel="prefetch" href="/docs/assets/js/47.1ee1a8f0.js"><link rel="prefetch" href="/docs/assets/js/48.c82450ab.js"><link rel="prefetch" href="/docs/assets/js/49.8016ee5f.js"><link rel="prefetch" href="/docs/assets/js/50.ab73e091.js"><link rel="prefetch" href="/docs/assets/js/51.bce6eb99.js"><link rel="prefetch" href="/docs/assets/js/52.c9b1992f.js"><link rel="prefetch" href="/docs/assets/js/53.7057f0f5.js"><link rel="prefetch" href="/docs/assets/js/54.cbb0a6b5.js"><link rel="prefetch" href="/docs/assets/js/55.89176a68.js"><link rel="prefetch" href="/docs/assets/js/57.c7a42e07.js"><link rel="prefetch" href="/docs/assets/js/58.09d6cb1b.js"><link rel="prefetch" href="/docs/assets/js/59.8445a09f.js"><link rel="prefetch" href="/docs/assets/js/6.5737c458.js"><link rel="prefetch" href="/docs/assets/js/60.86b1f417.js"><link rel="prefetch" href="/docs/assets/js/61.fa371ad1.js"><link rel="prefetch" href="/docs/assets/js/62.dbc75ddc.js"><link rel="prefetch" href="/docs/assets/js/63.a4465c93.js"><link rel="prefetch" href="/docs/assets/js/64.a39c3193.js"><link rel="prefetch" href="/docs/assets/js/65.a7275f82.js"><link rel="prefetch" href="/docs/assets/js/66.afd0af7d.js"><link rel="prefetch" href="/docs/assets/js/67.8009e00e.js"><link rel="prefetch" href="/docs/assets/js/68.de3c51dd.js"><link rel="prefetch" href="/docs/assets/js/69.41a50235.js"><link rel="prefetch" href="/docs/assets/js/70.938e9532.js"><link rel="prefetch" href="/docs/assets/js/71.af7fca59.js"><link rel="prefetch" href="/docs/assets/js/72.25df569a.js"><link rel="prefetch" href="/docs/assets/js/73.f16b7dc3.js"><link rel="prefetch" href="/docs/assets/js/74.d2184ed7.js"><link rel="prefetch" href="/docs/assets/js/75.9497b6fa.js"><link rel="prefetch" href="/docs/assets/js/76.2081d35e.js"><link rel="prefetch" href="/docs/assets/js/77.e5a8b470.js"><link rel="prefetch" href="/docs/assets/js/78.6d3ef23b.js"><link rel="prefetch" href="/docs/assets/js/79.025583e1.js"><link rel="prefetch" href="/docs/assets/js/8.8547d4ad.js"><link rel="prefetch" href="/docs/assets/js/80.e7e3ef35.js"><link rel="prefetch" href="/docs/assets/js/81.569d569f.js"><link rel="prefetch" href="/docs/assets/js/82.ac3ed0f7.js"><link rel="prefetch" href="/docs/assets/js/83.3393dfc3.js"><link rel="prefetch" href="/docs/assets/js/84.e5352ac1.js"><link rel="prefetch" href="/docs/assets/js/85.c7cdb129.js"><link rel="prefetch" href="/docs/assets/js/86.0aa0af94.js"><link rel="prefetch" href="/docs/assets/js/87.0db12b1e.js"><link rel="prefetch" href="/docs/assets/js/88.e8651cfa.js"><link rel="prefetch" href="/docs/assets/js/89.1b58abde.js"><link rel="prefetch" href="/docs/assets/js/9.0a882dfc.js"><link rel="prefetch" href="/docs/assets/js/90.d65d2d13.js"><link rel="prefetch" href="/docs/assets/js/91.32b2ad41.js"><link rel="prefetch" href="/docs/assets/js/92.795675a1.js"><link rel="prefetch" href="/docs/assets/js/93.818e5569.js"><link rel="prefetch" href="/docs/assets/js/94.79c2b16e.js"><link rel="prefetch" href="/docs/assets/js/95.4810ee5e.js"><link rel="prefetch" href="/docs/assets/js/96.6e382fd5.js"><link rel="prefetch" href="/docs/assets/js/97.e270d7b5.js"><link rel="prefetch" href="/docs/assets/js/98.728ef6c2.js"><link rel="prefetch" href="/docs/assets/js/99.c75096e0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.2091e099.js">
    19. 

  19.     <link rel="stylesheet" href="/docs/assets/css/0.styles.0cd93813.css">
    20. 

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <div id="app" data-server-rendered="true"><div class="theme-container"><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="/docs/zh-CN/" class="home-link router-link-active"><img src="https://dpubstatic.udache.com/static/dpubimg/t_L6vAgQ-E/logo.svg" alt="BetterScroll 2.0" class="logo"> <span class="site-name can-hide">BetterScroll 2.0</span></a> <div class="links"><form id="search-form" role="search" 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="/docs/zh-CN/guide/" class="nav-link">
    23. 

  23.   指南
    24. 

  24. </a></div><div class="nav-item"><a href="/docs/zh-CN/plugins/" class="nav-link router-link-active">
    25. 

  25.   插件
    26. 

  26. </a></div><div class="nav-item"><a href="/docs/zh-CN/FAQ/" class="nav-link">
    27. 

  27.   常见问题
    28. 

  28. </a></div><div class="nav-item"><a href="https://github.com/ustbhuangyi/better-scroll/issues" target="_blank" rel="noopener noreferrer" class="nav-link external">
    29. 

  29.   讨论
    30. 

  30.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs/en-US/plugins/wheel.html" class="nav-link">
    31. 

  31.   English
    32. 

  32. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/wheel.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
    33. 

  33.   简体中文
    34. 

  34. </a></li></ul></div></div> <a href="https://github.com/ustbhuangyi/better-scroll" target="_blank" rel="noopener noreferrer" class="repo-link">
    35. 

  35.     GitHub
    36. 

  36.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/zh-CN/guide/" class="nav-link">
    37. 

  37.   指南
    38. 

  38. </a></div><div class="nav-item"><a href="/docs/zh-CN/plugins/" class="nav-link router-link-active">
    39. 

  39.   插件
    40. 

  40. </a></div><div class="nav-item"><a href="/docs/zh-CN/FAQ/" class="nav-link">
    41. 

  41.   常见问题
    42. 

  42. </a></div><div class="nav-item"><a href="https://github.com/ustbhuangyi/better-scroll/issues" target="_blank" rel="noopener noreferrer" class="nav-link external">
    43. 

  43.   讨论
    44. 

  44.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs/en-US/plugins/wheel.html" class="nav-link">
    45. 

  45.   English
    46. 

  46. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/wheel.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
    47. 

  47.   简体中文
    48. 

  48. </a></li></ul></div></div> <a href="https://github.com/ustbhuangyi/better-scroll" target="_blank" rel="noopener noreferrer" class="repo-link">
    49. 

  49.     GitHub
    50. 

  50.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span></span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/zh-CN/plugins/" aria-current="page" class="sidebar-link">插件</a></li><li><a href="/docs/zh-CN/plugins/how-to-write.html" class="sidebar-link">如何写一个插件</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span></span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/zh-CN/plugins/mouse-wheel.html" class="sidebar-link">mouse-wheel</a></li><li><a href="/docs/zh-CN/plugins/observe-dom.html" class="sidebar-link">observe-dom</a></li><li><a href="/docs/zh-CN/plugins/observe-image.html" class="sidebar-link">observe-image</a></li><li><a href="/docs/zh-CN/plugins/pulldown.html" class="sidebar-link">pulldown</a></li><li><a href="/docs/zh-CN/plugins/pullup.html" class="sidebar-link">pullup</a></li><li><a href="/docs/zh-CN/plugins/scroll-bar.html" class="sidebar-link">scrollbar</a></li><li><a href="/docs/zh-CN/plugins/indicators.html" class="sidebar-link">indicators</a></li><li><a href="/docs/zh-CN/plugins/slide.html" class="sidebar-link">slide</a></li><li><a href="/docs/zh-CN/plugins/wheel.html" aria-current="page" class="active sidebar-link">wheel</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/zh-CN/plugins/wheel.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/plugins/wheel.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/plugins/wheel.html#使用" class="sidebar-link">使用</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/plugins/wheel.html#wheel-选项对象" class="sidebar-link">wheel 选项对象</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/plugins/wheel.html#实例方法" class="sidebar-link">实例方法</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/plugins/wheel.html#事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/docs/zh-CN/plugins/zoom.html" class="sidebar-link">zoom</a></li><li><a href="/docs/zh-CN/plugins/nested-scroll.html" class="sidebar-link">nested-scroll</a></li><li><a href="/docs/zh-CN/plugins/infinity.html" class="sidebar-link">infinity</a></li><li><a href="/docs/zh-CN/plugins/movable.html" class="sidebar-link">movable</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="wheel"><a href="#wheel" class="header-anchor">#</a> wheel</h1> <h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p>wheel 插件，是实现类似 IOS Picker 组件的基石。</p> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> @better-scroll/wheel <span class="token parameter variable">--save</span>
    51. 

  51. 

  52. // or
    53. 

  53. 

  54. <span class="token function">yarn</span> <span class="token function">add</span> @better-scroll/wheel
    55. 

  55. </code></pre></div><h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <p>首先引入 wheel 插件，并通过静态方法 <code>BScroll.use()</code> 注册插件。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    56. 

  56. <span class="token keyword">import</span> Wheel <span class="token keyword">from</span> <span class="token string">'@better-scroll/wheel'</span>
    57. 

  57. 

  58. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Wheel<span class="token punctuation">)</span>
    59. 

  59. </code></pre></div><p>接着在 <code>options</code> 传入正确的配置</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">let</span> bs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.bs-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    60. 

  60.     <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// wheel options 为 true</span>
    61. 

  61.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    62. 

  62. </code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>wheel options 是 true 或者对象，否则插件功能失效，具体请参考<a href="/docs/zh-CN/plugins/wheel.html#wheel-选项对象"> wheel options</a>。</p></div> <div class="custom-block danger"><p class="custom-block-title">危险</p> <p>BetterScroll 结合 wheel 插件只是实现 Picker 效果的 JS 逻辑部分，还有 DOM 模版是需要用户去实现，所幸，对于大多数的 Picker 场景，我们给出了相对应的示例。</p></div> <ul><li><p><strong>基本使用</strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#000"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_0qwjayuumo" aria-hidden="true" tabindex="0" class="tooltip popover vue-popover-theme" style="visibility:hidden;"><div class="wrapper"><div class="tooltip-inner popover-inner" style="position:relative;"><div><div></div></div> <div tabindex="-1" class="resize-observer" data-v-8859cc6c></div></div> <div class="tooltip-arrow popover-arrow"></div></div></div></div> <i class="demo-nav-btn icon-preview"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></i></div> <div class="demo-code" style="display:;"><div class="demo-code-nav"><button class="demo-code-btn active">Template</button><button class="demo-code-btn">Script</button><button class="demo-code-btn">Style</button></div> <div class="demo-code-content"><div class="demo-code-item" style="display:;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    63. 

  63.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    64. 

  64.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>example-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    65. 

  65.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>example-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>show<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    66. 

  66.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>open<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{selectedText}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    67. 

  67.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    68. 

  68.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    69. 

  69.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-fade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    70. 

  70.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>state===1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchmove.prevent</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_cancel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    71. 

  71.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-move<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    72. 

  72.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-panel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>state===1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.stop</span><span class="token punctuation">&gt;</span></span>
    73. 

  73.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-choose border-bottom-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    74. 

  74.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cancel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_cancel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    75. 

  75.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confirm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_confirm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    76. 

  76.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    77. 

  77.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    78. 

  78.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    79. 

  79.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask-top border-bottom-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    80. 

  80.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask-bottom border-top-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    81. 

  81.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-wrapper<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheelWrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    82. 

  82.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    83. 

  83.                   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    84. 

  84.                     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>
    85. 

  85.                       <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in pickerData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
    86. 

  86.                       <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{'wheel-disabled-item':item.disabled}<span class="token punctuation">&quot;</span></span>
    87. 

  87.                       <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.text}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    88. 

  88.                   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    89. 

  89.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    90. 

  90.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    91. 

  91.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    92. 

  92.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    93. 

  93.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    94. 

  94.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    95. 

  95.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    96. 

  96.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    97. 

  97.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    98. 

  98. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/ecmascript-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    99. 

  99.   <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    100. 

  100.   <span class="token keyword">import</span> Wheel <span class="token keyword">from</span> <span class="token string">'@better-scroll/wheel'</span>
    101. 

  101.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Wheel<span class="token punctuation">)</span>
    102. 

  102. 

  103.   <span class="token keyword">const</span> <span class="token constant">STATE_HIDE</span> <span class="token operator">=</span> <span class="token number">0</span>
    104. 

  104.   <span class="token keyword">const</span> <span class="token constant">STATE_SHOW</span> <span class="token operator">=</span> <span class="token number">1</span>
    105. 

  105. 

  106.   <span class="token keyword">const</span> <span class="token constant">COMPONENT_NAME</span> <span class="token operator">=</span> <span class="token string">'picker'</span>
    107. 

  107.   <span class="token keyword">const</span> <span class="token constant">EVENT_SELECT</span> <span class="token operator">=</span> <span class="token string">'select'</span>
    108. 

  108.   <span class="token keyword">const</span> <span class="token constant">EVENT_CANCEL</span> <span class="token operator">=</span> <span class="token string">'cancel'</span>
    109. 

  109.   <span class="token keyword">const</span> <span class="token constant">EVENT_CHANGE</span> <span class="token operator">=</span> <span class="token string">'change'</span>
    110. 

  110.   <span class="token keyword">const</span> <span class="token constant">WHEEL_INDEX_CHANGED</span> <span class="token operator">=</span> <span class="token string">'wheelIndexChanged'</span>
    111. 

  111. 

  112.   <span class="token keyword">const</span> <span class="token constant">DATA</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    113. 

  113.     <span class="token punctuation">{</span>
    114. 

  114.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Venomancer'</span><span class="token punctuation">,</span>
    115. 

  115.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    116. 

  116.       <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token string">'wheel-disabled-item'</span>
    117. 

  117.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    118. 

  118.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Nerubian Weaver'</span><span class="token punctuation">,</span>
    119. 

  119.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span>
    120. 

  120.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    121. 

  121.     <span class="token punctuation">{</span>
    122. 

  122.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Spectre'</span><span class="token punctuation">,</span>
    123. 

  123.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span>
    124. 

  124.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    125. 

  125.     <span class="token punctuation">{</span>
    126. 

  126.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Juggernaut'</span><span class="token punctuation">,</span>
    127. 

  127.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span>
    128. 

  128.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    129. 

  129.     <span class="token punctuation">{</span>
    130. 

  130.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Karl'</span><span class="token punctuation">,</span>
    131. 

  131.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span>
    132. 

  132.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    133. 

  133.     <span class="token punctuation">{</span>
    134. 

  134.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Zeus'</span><span class="token punctuation">,</span>
    135. 

  135.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span>
    136. 

  136.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    137. 

  137.     <span class="token punctuation">{</span>
    138. 

  138.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Witch Doctor'</span><span class="token punctuation">,</span>
    139. 

  139.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">7</span>
    140. 

  140.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    141. 

  141.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Lich'</span><span class="token punctuation">,</span>
    142. 

  142.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">8</span>
    143. 

  143.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    144. 

  144.     <span class="token punctuation">{</span>
    145. 

  145.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Oracle'</span><span class="token punctuation">,</span>
    146. 

  146.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">9</span>
    147. 

  147.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    148. 

  148.     <span class="token punctuation">{</span>
    149. 

  149.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Earthshaker'</span><span class="token punctuation">,</span>
    150. 

  150.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span>
    151. 

  151.     <span class="token punctuation">}</span>
    152. 

  152.   <span class="token punctuation">]</span>
    153. 

  153. 

  154.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    155. 

  155.     <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token constant">COMPONENT_NAME</span><span class="token punctuation">,</span>
    156. 

  156.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    157. 

  157.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    158. 

  158.         <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token constant">STATE_HIDE</span><span class="token punctuation">,</span>
    159. 

  159.         <span class="token literal-property property">selectedIndex</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    160. 

  160.         <span class="token literal-property property">selectedText</span><span class="token operator">:</span> <span class="token string">'open'</span><span class="token punctuation">,</span>
    161. 

  161.         <span class="token literal-property property">pickerData</span><span class="token operator">:</span> <span class="token constant">DATA</span>
    162. 

  162.       <span class="token punctuation">}</span>
    163. 

  163.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    164. 

  164.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    165. 

  165.       <span class="token function">_confirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    166. 

  166.         <span class="token comment">/*
    167. 

  167.          * if bs is scrolling, force it stop at the nearest wheel-item
    168. 

  168.          * or you can use 'restorePosition' method as the below
    169. 

  169.         */</span>
    170. 

  170.         <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    171. 

  171.         <span class="token comment">/*
    172. 

  172.          * if bs is scrolling, restore it to the start position
    173. 

  173.          * it is same with iOS picker and web Select element implementation
    174. 

  174.          * supported at v2.1.0
    175. 

  175.         */</span>
    176. 

  176.         <span class="token comment">// this.wheel.restorePosition()</span>
    177. 

  177. 

  178.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    179. 

  179.         <span class="token keyword">const</span> currentSelectedIndex <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndex <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    180. 

  180.         <span class="token keyword">this</span><span class="token punctuation">.</span>selectedText <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>pickerData<span class="token punctuation">[</span>currentSelectedIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentSelectedIndex<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
    181. 

  181.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_SELECT</span><span class="token punctuation">,</span> currentSelectedIndex<span class="token punctuation">)</span>
    182. 

  182.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    183. 

  183.       <span class="token function">_cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    184. 

  184.         <span class="token comment">/*
    185. 

  185.          * if bs is scrolling, restore it to the start position
    186. 

  186.          * it is same with iOS picker and web Select element implementation
    187. 

  187.          * supported at v2.1.0
    188. 

  188.         */</span>
    189. 

  189.         <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">restorePosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    190. 

  190.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    191. 

  191.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_CANCEL</span><span class="token punctuation">)</span>
    192. 

  192.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    193. 

  193.       <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    194. 

  194.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">===</span> <span class="token constant">STATE_SHOW</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    195. 

  195.           <span class="token keyword">return</span>
    196. 

  196.         <span class="token punctuation">}</span>
    197. 

  197.         <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token constant">STATE_SHOW</span>
    198. 

  198.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    199. 

  199.           <span class="token comment">// waiting for DOM rendered</span>
    200. 

  200.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    201. 

  201.             <span class="token keyword">const</span> wrapper <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>wheelWrapper<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
    202. 

  202.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_createWheel</span><span class="token punctuation">(</span>wrapper<span class="token punctuation">)</span>
    203. 

  203.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    204. 

  204.         <span class="token punctuation">}</span>
    205. 

  205.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    206. 

  206.       <span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    207. 

  207.         <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token constant">STATE_HIDE</span>
    208. 

  208.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    209. 

  209.       <span class="token function">_createWheel</span><span class="token punctuation">(</span><span class="token parameter">wheelWrapper</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    210. 

  210.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    211. 

  211.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheel <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span>wheelWrapper<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    212. 

  212.             <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    213. 

  213.               <span class="token literal-property property">selectedIndex</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndex<span class="token punctuation">,</span>
    214. 

  214.               <span class="token literal-property property">wheelWrapperClass</span><span class="token operator">:</span> <span class="token string">'wheel-scroll'</span><span class="token punctuation">,</span>
    215. 

  215.               <span class="token literal-property property">wheelItemClass</span><span class="token operator">:</span> <span class="token string">'wheel-item'</span><span class="token punctuation">,</span>
    216. 

  216.               <span class="token literal-property property">wheelDisabledItemClass</span><span class="token operator">:</span> <span class="token string">'wheel-disabled-item'</span>
    217. 

  217.             <span class="token punctuation">}</span><span class="token punctuation">,</span>
    218. 

  218.             <span class="token literal-property property">useTransition</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    219. 

  219.             <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span>
    220. 

  220.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    221. 

  221.           <span class="token comment">// &lt; v2.1.0</span>
    222. 

  222.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollEnd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    223. 

  223.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_CHANGE</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    224. 

  224.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    225. 

  225.           <span class="token comment">// v2.1.0, only when selectedIndex changed</span>
    226. 

  226.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token constant">WHEEL_INDEX_CHANGED</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    227. 

  227.             console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span>
    228. 

  228.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    229. 

  229.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    230. 

  230.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheel<span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    231. 

  231.         <span class="token punctuation">}</span>
    232. 

  232.         <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheel
    233. 

  233.       <span class="token punctuation">}</span>
    234. 

  234.     <span class="token punctuation">}</span>
    235. 

  235.   <span class="token punctuation">}</span>
    236. 

  236. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-styl extra-class"><pre class="language-styl"><code>&lt;style scoped lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    237. 

  237. 

  238.   <span class="token selector"><span class="token comment">/* reset */</span>
    239. 

  239.   ul</span>
    240. 

  240.     <span class="token property-declaration"><span class="token property">list-style</span> none</span>
    241. 

  241.     <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span></span>
    242. 

  242. 

  243.   <span class="token selector">.border-bottom-1px<span class="token punctuation">,</span> .border-top-1px</span>
    244. 

  244.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    245. 

  245.     <span class="token selector">&amp;:before<span class="token punctuation">,</span> &amp;:after</span>
    246. 

  246.       <span class="token property-declaration"><span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span></span>
    247. 

  247.       <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> block</span>
    248. 

  248.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    249. 

  249.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span></span>
    250. 

  250.   <span class="token selector">.border-bottom-1px</span>
    251. 

  251.     <span class="token selector">&amp;:after</span>
    252. 

  252.       <span class="token property-declaration"><span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ebebeb</span></span>
    253. 

  253.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    254. 

  254.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    255. 

  255.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    256. 

  256.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> bottom</span>
    257. 

  257.   <span class="token selector">.border-top-1px</span>
    258. 

  258.     <span class="token selector">&amp;:before</span>
    259. 

  259.       <span class="token property-declaration"><span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ebebeb</span></span>
    260. 

  260.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    261. 

  261.       <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    262. 

  262.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    263. 

  263.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> top</span>
    264. 

  264.   <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>-webkit-min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span></span>
    265. 

  265.     <span class="token selector">.border-top-1px</span>
    266. 

  266.       <span class="token selector">&amp;:before</span>
    267. 

  267.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    268. 

  268.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.5</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    269. 

  269.     <span class="token selector">.border-bottom-1px</span>
    270. 

  270.       <span class="token selector">&amp;:after</span>
    271. 

  271.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    272. 

  272.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.5</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    273. 

  273. 

  274.   <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>-webkit-min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">)</span></span>
    275. 

  275.     <span class="token selector">.border-top-1px</span>
    276. 

  276.       <span class="token selector">&amp;:before</span>
    277. 

  277.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">%</span></span>
    278. 

  278.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.333</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    279. 

  279.     <span class="token selector">.border-bottom-1px</span>
    280. 

  280.       <span class="token selector">&amp;:after</span>
    281. 

  281.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">%</span></span>
    282. 

  282.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.333</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    283. 

  283.   <span class="token selector">.example-list</span>
    284. 

  284.     <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
    285. 

  285.     <span class="token property-declaration"><span class="token property">justify-content</span><span class="token punctuation">:</span> space-between</span>
    286. 

  286.     <span class="token property-declaration"><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap</span>
    287. 

  287.     <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">rem</span></span>
    288. 

  288. 

  289.     <span class="token selector">.example-item</span>
    290. 

  290.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token color">white</span></span>
    291. 

  291.       <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token unit">rem</span></span>
    292. 

  292.       <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.1</span><span class="token punctuation">)</span></span></span>
    293. 

  293.       <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span><span class="token unit">px</span> <span class="token number">2</span><span class="token unit">px</span> <span class="token number">0</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0.1</span><span class="token punctuation">)</span></span></span>
    294. 

  294.       <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    295. 

  295.       <span class="token property-declaration"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">rem</span></span>
    296. 

  296.       <span class="token property-declaration"><span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span></span>
    297. 

  297.       <span class="token selector">&amp;.placeholder</span>
    298. 

  298.         <span class="token property-declaration"><span class="token property">visibility</span><span class="token punctuation">:</span> hidden</span>
    299. 

  299.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    300. 

  300.         <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    301. 

  301.         <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    302. 

  302. 

  303.   <span class="token selector">.picker</span>
    304. 

  304.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> fixed</span>
    305. 

  305.     <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    306. 

  306.     <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    307. 

  307.     <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">100</span></span>
    308. 

  308.     <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    309. 

  309.     <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    310. 

  310.     <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    311. 

  311.     <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    312. 

  312.     <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span></span>
    313. 

  313.     <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">38</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">.4</span><span class="token punctuation">)</span></span></span>
    314. 

  314.     <span class="token selector">&amp;.picker-fade-enter<span class="token punctuation">,</span> &amp;.picker-fade-leave-active</span>
    315. 

  315.       <span class="token property-declaration"><span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    316. 

  316.     <span class="token selector">&amp;.picker-fade-enter-active<span class="token punctuation">,</span> &amp;.picker-fade-leave-active</span>
    317. 

  317.       <span class="token property-declaration"><span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease-<span class="token operator">in</span>-out</span>
    318. 

  318. 

  319.     <span class="token selector">.picker-panel</span>
    320. 

  320.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    321. 

  321.       <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">600</span></span>
    322. 

  322.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    323. 

  323.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    324. 

  324.       <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">273</span><span class="token unit">px</span></span>
    325. 

  325.       <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">white</span></span>
    326. 

  326.       <span class="token selector">&amp;.picker-move-enter<span class="token punctuation">,</span> &amp;.picker-move-leave-active</span>
    327. 

  327.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">273</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span></span>
    328. 

  328.       <span class="token selector">&amp;.picker-move-enter-active<span class="token punctuation">,</span> &amp;.picker-move-leave-active</span>
    329. 

  329.         <span class="token property-declaration"><span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease-<span class="token operator">in</span>-out</span>
    330. 

  330.       <span class="token selector">.picker-choose</span>
    331. 

  331.         <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    332. 

  332.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    333. 

  333.         <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span></span>
    334. 

  334.         <span class="token selector">.picker-title</span>
    335. 

  335.           <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    336. 

  336.           <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    337. 

  337.           <span class="token property-declaration"><span class="token property">font-weight</span><span class="token punctuation">:</span> normal</span>
    338. 

  338.           <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    339. 

  339.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span></span>
    340. 

  340.           <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span></span>
    341. 

  341.         <span class="token selector">.confirm<span class="token punctuation">,</span> .cancel</span>
    342. 

  342.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    343. 

  343.           <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">6</span><span class="token unit">px</span></span>
    344. 

  344.           <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">16</span><span class="token unit">px</span></span>
    345. 

  345.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span></span>
    346. 

  346.         <span class="token selector">.confirm</span>
    347. 

  347.           <span class="token property-declaration"><span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    348. 

  348.           <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#007bff</span></span>
    349. 

  349.           <span class="token selector">&amp;:active</span>
    350. 

  350.             <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#5aaaff</span></span>
    351. 

  351.         <span class="token selector">.cancel</span>
    352. 

  352.           <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    353. 

  353.           <span class="token selector">&amp;:active</span>
    354. 

  354.             <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#c2c2c2</span></span>
    355. 

  355.       <span class="token selector">.picker-content</span>
    356. 

  356.         <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    357. 

  357.         <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    358. 

  358.         <span class="token selector">.mask-top<span class="token punctuation">,</span> .mask-bottom</span>
    359. 

  359.           <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">10</span></span>
    360. 

  360.           <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    361. 

  361.           <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">68</span><span class="token unit">px</span></span>
    362. 

  362.           <span class="token property-declaration"><span class="token property">pointer-events</span><span class="token punctuation">:</span> none</span>
    363. 

  363.           <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span>
    364. 

  364.         <span class="token selector">.mask-top</span>
    365. 

  365.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    366. 

  366.           <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    367. 

  367.           <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top<span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span>
    368. 

  368.         <span class="token selector">.mask-bottom</span>
    369. 

  369.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    370. 

  370.           <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span></span>
    371. 

  371.           <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom<span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span>
    372. 

  372.       <span class="token selector">.wheel-wrapper</span>
    373. 

  373.         <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
    374. 

  374.         <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">16</span><span class="token unit">px</span></span>
    375. 

  375.         <span class="token selector">.wheel</span>
    376. 

  376.           <span class="token property-declaration"><span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span></span>
    377. 

  377.           <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">%</span></span>
    378. 

  378.           <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">173</span><span class="token unit">px</span></span>
    379. 

  379.           <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    380. 

  380.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span></span>
    381. 

  381.           <span class="token selector">.wheel-scroll</span>
    382. 

  382.             <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    383. 

  383.             <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">68</span><span class="token unit">px</span></span>
    384. 

  384.             <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">36</span><span class="token unit">px</span></span>
    385. 

  385.             <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    386. 

  386.             <span class="token selector">.wheel-item</span>
    387. 

  387.               <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    388. 

  388.               <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">36</span><span class="token unit">px</span></span>
    389. 

  389.               <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    390. 

  390.               <span class="token property-declaration"><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap</span>
    391. 

  391.               <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span></span>
    392. 

  392.               <span class="token selector">&amp;.wheel-disabled-item</span>
    393. 

  393.                 <span class="token property-declaration"><span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">.2</span><span class="token punctuation">;</span></span>
    394. 

  394.     <span class="token selector">.picker-footer</span>
    395. 

  395.       <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    396. 

  396. &lt;/style&gt;</code></pre></div></div> <i class="demo-code-content-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#ccc"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></i> <!----></div></div> <div class="demo-main"><div class="demo-component-wrap"></div></div></div> <p>单列 Picker 是一个比较常见的效果。你可以通过 <code>selectedIndex</code> 来配置初始化时选中对应索引的 item，<code>wheelDisabledItemClass</code> 配置想要禁用的 item 项来模拟 Web Select 标签 disable 的效果。</p></li> <li><p><strong>多项选择器</strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_xf462wc4bf" aria-hidden="true" tabindex="0" class="tooltip popover vue-popover-theme" style="visibility:hidden;"><div class="wrapper"><div class="tooltip-inner popover-inner" style="position:relative;"><div><div></div></div> <div tabindex="-1" class="resize-observer" data-v-8859cc6c></div></div> <div class="tooltip-arrow popover-arrow"></div></div></div></div> <i class="demo-nav-btn icon-preview"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></i></div> <div class="demo-code" style="display:none;"><div class="demo-code-nav"><button class="demo-code-btn active">Template</button><button class="demo-code-btn">Script</button><button class="demo-code-btn">Style</button></div> <div class="demo-code-content"><div class="demo-code-item" style="display:;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    397. 

  397.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    398. 

  398.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>example-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    399. 

  399.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>example-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>show<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    400. 

  400.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>open<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{selectedText}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    401. 

  401.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    402. 

  402.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    403. 

  403.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-fade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    404. 

  404.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>state===1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchmove.prevent</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_cancel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    405. 

  405.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-move<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    406. 

  406.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-panel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>state===1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.stop</span><span class="token punctuation">&gt;</span></span>
    407. 

  407.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-choose border-bottom-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    408. 

  408.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cancel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_cancel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    409. 

  409.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confirm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_confirm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    410. 

  410.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    411. 

  411.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    412. 

  412.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    413. 

  413.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask-top border-bottom-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    414. 

  414.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask-bottom border-top-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    415. 

  415.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-wrapper<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheelWrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    416. 

  416.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(data, index) in pickerData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    417. 

  417.                   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    418. 

  418.                     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>
    419. 

  419.                       <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
    420. 

  420.                       <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.text}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    421. 

  421.                   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    422. 

  422.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    423. 

  423.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    424. 

  424.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    425. 

  425.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    426. 

  426.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    427. 

  427.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    428. 

  428.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    429. 

  429.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    430. 

  430.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    431. 

  431. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/ecmascript-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    432. 

  432.   <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    433. 

  433.   <span class="token keyword">import</span> Wheel <span class="token keyword">from</span> <span class="token string">'@better-scroll/wheel'</span>
    434. 

  434.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Wheel<span class="token punctuation">)</span>
    435. 

  435.   <span class="token keyword">const</span> <span class="token constant">STATE_HIDE</span> <span class="token operator">=</span> <span class="token number">0</span>
    436. 

  436.   <span class="token keyword">const</span> <span class="token constant">STATE_SHOW</span> <span class="token operator">=</span> <span class="token number">1</span>
    437. 

  437. 

  438.   <span class="token keyword">const</span> <span class="token constant">COMPONENT_NAME</span> <span class="token operator">=</span> <span class="token string">'picker'</span>
    439. 

  439.   <span class="token keyword">const</span> <span class="token constant">EVENT_SELECT</span> <span class="token operator">=</span> <span class="token string">'select'</span>
    440. 

  440.   <span class="token keyword">const</span> <span class="token constant">EVENT_CANCEL</span> <span class="token operator">=</span> <span class="token string">'cancel'</span>
    441. 

  441.   <span class="token keyword">const</span> <span class="token constant">EVENT_CHANGE</span> <span class="token operator">=</span> <span class="token string">'change'</span>
    442. 

  442. 

  443.   <span class="token keyword">const</span> <span class="token constant">DATA1</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    444. 

  444.     <span class="token punctuation">{</span>
    445. 

  445.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Venomancer'</span><span class="token punctuation">,</span>
    446. 

  446.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span>
    447. 

  447.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    448. 

  448.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Nerubian Weaver'</span><span class="token punctuation">,</span>
    449. 

  449.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span>
    450. 

  450.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    451. 

  451.     <span class="token punctuation">{</span>
    452. 

  452.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Spectre'</span><span class="token punctuation">,</span>
    453. 

  453.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span>
    454. 

  454.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    455. 

  455.     <span class="token punctuation">{</span>
    456. 

  456.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Juggernaut'</span><span class="token punctuation">,</span>
    457. 

  457.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span>
    458. 

  458.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    459. 

  459.     <span class="token punctuation">{</span>
    460. 

  460.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Karl'</span><span class="token punctuation">,</span>
    461. 

  461.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">5</span>
    462. 

  462.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    463. 

  463.     <span class="token punctuation">{</span>
    464. 

  464.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Zeus'</span><span class="token punctuation">,</span>
    465. 

  465.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">6</span>
    466. 

  466.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    467. 

  467.     <span class="token punctuation">{</span>
    468. 

  468.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Witch Doctor'</span><span class="token punctuation">,</span>
    469. 

  469.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">7</span>
    470. 

  470.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    471. 

  471.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Lich'</span><span class="token punctuation">,</span>
    472. 

  472.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">8</span>
    473. 

  473.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    474. 

  474.     <span class="token punctuation">{</span>
    475. 

  475.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Oracle'</span><span class="token punctuation">,</span>
    476. 

  476.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">9</span>
    477. 

  477.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    478. 

  478.     <span class="token punctuation">{</span>
    479. 

  479.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Earthshaker'</span><span class="token punctuation">,</span>
    480. 

  480.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">10</span>
    481. 

  481.     <span class="token punctuation">}</span>
    482. 

  482.   <span class="token punctuation">]</span>
    483. 

  483. 

  484.   <span class="token keyword">const</span> <span class="token constant">DATA2</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    485. 

  485.     <span class="token punctuation">{</span>
    486. 

  486.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Durable'</span><span class="token punctuation">,</span>
    487. 

  487.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'a'</span>
    488. 

  488.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    489. 

  489.     <span class="token punctuation">{</span>
    490. 

  490.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Pusher'</span><span class="token punctuation">,</span>
    491. 

  491.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'b'</span>
    492. 

  492.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    493. 

  493.     <span class="token punctuation">{</span>
    494. 

  494.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Carry'</span><span class="token punctuation">,</span>
    495. 

  495.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'c'</span>
    496. 

  496.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    497. 

  497.     <span class="token punctuation">{</span>
    498. 

  498.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Nuker'</span><span class="token punctuation">,</span>
    499. 

  499.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'d'</span>
    500. 

  500.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    501. 

  501.     <span class="token punctuation">{</span>
    502. 

  502.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Support'</span><span class="token punctuation">,</span>
    503. 

  503.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'e'</span>
    504. 

  504.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    505. 

  505.     <span class="token punctuation">{</span>
    506. 

  506.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Jungle'</span><span class="token punctuation">,</span>
    507. 

  507.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'f'</span>
    508. 

  508.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    509. 

  509.     <span class="token punctuation">{</span>
    510. 

  510.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Escape'</span><span class="token punctuation">,</span>
    511. 

  511.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'g'</span>
    512. 

  512.     <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    513. 

  513.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'Initiator'</span><span class="token punctuation">,</span>
    514. 

  514.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'h'</span>
    515. 

  515.     <span class="token punctuation">}</span>
    516. 

  516.   <span class="token punctuation">]</span>
    517. 

  517. 

  518.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    519. 

  519.     <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token constant">COMPONENT_NAME</span><span class="token punctuation">,</span>
    520. 

  520.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    521. 

  521.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    522. 

  522.         <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token constant">STATE_HIDE</span><span class="token punctuation">,</span>
    523. 

  523.         <span class="token literal-property property">selectedIndexPair</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    524. 

  524.         <span class="token literal-property property">selectedText</span><span class="token operator">:</span> <span class="token string">'open'</span><span class="token punctuation">,</span>
    525. 

  525.         <span class="token literal-property property">pickerData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token constant">DATA1</span><span class="token punctuation">,</span> <span class="token constant">DATA2</span><span class="token punctuation">]</span>
    526. 

  526.       <span class="token punctuation">}</span>
    527. 

  527.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    528. 

  528.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    529. 

  529.       <span class="token function">_confirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    530. 

  530.         <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    531. 

  531.           <span class="token comment">/*
    532. 

  532.           * if bs is scrolling, force it stop at the nearest wheel-item
    533. 

  533.           * or you can use 'restorePosition' method as the below
    534. 

  534.           */</span>
    535. 

  535.           <span class="token comment">// wheel.stop()</span>
    536. 

  536.           <span class="token comment">/*
    537. 

  537.           * if bs is scrolling, restore it to the start position
    538. 

  538.           * it is same with iOS picker and web Select element implementation
    539. 

  539.           * supported at v2.1.0
    540. 

  540.           */</span>
    541. 

  541.           wheel<span class="token punctuation">.</span><span class="token function">restorePosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    542. 

  542.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    543. 

  543.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    544. 

  544. 

  545.         <span class="token keyword">const</span> currentSelectedIndexPair <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndexPair <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    546. 

  546.           <span class="token keyword">return</span> wheel<span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    547. 

  547.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    548. 

  548. 

  549.         <span class="token keyword">this</span><span class="token punctuation">.</span>selectedText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pickerData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    550. 

  550.           <span class="token keyword">const</span> index <span class="token operator">=</span> currentSelectedIndexPair<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    551. 

  551.           <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
    552. 

  552.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'__'</span><span class="token punctuation">)</span>
    553. 

  553.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_SELECT</span><span class="token punctuation">,</span> currentSelectedIndexPair<span class="token punctuation">)</span>
    554. 

  554.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    555. 

  555.       <span class="token function">_cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    556. 

  556.         <span class="token comment">/*
    557. 

  557.          * if bs is scrolling, restore it to the start position
    558. 

  558.          * it is same with iOS picker and web Select element implementation
    559. 

  559.          * supported at v2.1.0
    560. 

  560.         */</span>
    561. 

  561.         <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    562. 

  562.           wheel<span class="token punctuation">.</span><span class="token function">restorePosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    563. 

  563.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    564. 

  564.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    565. 

  565.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_CANCEL</span><span class="token punctuation">)</span>
    566. 

  566.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    567. 

  567.       <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    568. 

  568.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">===</span> <span class="token constant">STATE_SHOW</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    569. 

  569.           <span class="token keyword">return</span>
    570. 

  570.         <span class="token punctuation">}</span>
    571. 

  571.         <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token constant">STATE_SHOW</span>
    572. 

  572. 

  573.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    574. 

  574.           <span class="token comment">// waiting for DOM rendered</span>
    575. 

  575.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    576. 

  576.             <span class="token keyword">this</span><span class="token punctuation">.</span>wheels <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    577. 

  577.             <span class="token keyword">let</span> wheelWrapper <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>wheelWrapper
    578. 

  578.             <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pickerData<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    579. 

  579.               <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_createWheel</span><span class="token punctuation">(</span>wheelWrapper<span class="token punctuation">,</span> i<span class="token punctuation">)</span>
    580. 

  580.             <span class="token punctuation">}</span>
    581. 

  581.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    582. 

  582.         <span class="token punctuation">}</span>
    583. 

  583.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    584. 

  584.       <span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    585. 

  585.         <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token constant">STATE_HIDE</span>
    586. 

  586.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    587. 

  587.       <span class="token function">_createWheel</span><span class="token punctuation">(</span><span class="token parameter">wheelWrapper<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    588. 

  588.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    589. 

  589.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span>wheelWrapper<span class="token punctuation">.</span>children<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    590. 

  590.             <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    591. 

  591.               <span class="token literal-property property">selectedIndex</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndexPair<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>
    592. 

  592.               <span class="token literal-property property">wheelWrapperClass</span><span class="token operator">:</span> <span class="token string">'wheel-scroll'</span><span class="token punctuation">,</span>
    593. 

  593.               <span class="token literal-property property">wheelItemClass</span><span class="token operator">:</span> <span class="token string">'wheel-item'</span>
    594. 

  594.             <span class="token punctuation">}</span><span class="token punctuation">,</span>
    595. 

  595.             <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span>
    596. 

  596.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    597. 

  597.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollEnd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    598. 

  598.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_CHANGE</span><span class="token punctuation">,</span> i<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    599. 

  599.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    600. 

  600.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    601. 

  601.           <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    602. 

  602.         <span class="token punctuation">}</span>
    603. 

  603. 

  604.         <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    605. 

  605.       <span class="token punctuation">}</span>
    606. 

  606.     <span class="token punctuation">}</span>
    607. 

  607.   <span class="token punctuation">}</span>
    608. 

  608. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-styl extra-class"><pre class="language-styl"><code>&lt;style scoped lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    609. 

  609. 

  610.   <span class="token selector"><span class="token comment">/* reset */</span>
    611. 

  611.   ul</span>
    612. 

  612.     <span class="token property-declaration"><span class="token property">list-style</span> none</span>
    613. 

  613.     <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span></span>
    614. 

  614. 

  615.   <span class="token selector">.border-bottom-1px<span class="token punctuation">,</span> .border-top-1px</span>
    616. 

  616.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    617. 

  617.     <span class="token selector">&amp;:before<span class="token punctuation">,</span> &amp;:after</span>
    618. 

  618.       <span class="token property-declaration"><span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span></span>
    619. 

  619.       <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> block</span>
    620. 

  620.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    621. 

  621.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span></span>
    622. 

  622.   <span class="token selector">.border-bottom-1px</span>
    623. 

  623.     <span class="token selector">&amp;:after</span>
    624. 

  624.       <span class="token property-declaration"><span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ebebeb</span></span>
    625. 

  625.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    626. 

  626.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    627. 

  627.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    628. 

  628.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> bottom</span>
    629. 

  629.   <span class="token selector">.border-top-1px</span>
    630. 

  630.     <span class="token selector">&amp;:before</span>
    631. 

  631.       <span class="token property-declaration"><span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ebebeb</span></span>
    632. 

  632.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    633. 

  633.       <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    634. 

  634.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    635. 

  635.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> top</span>
    636. 

  636.   <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>-webkit-min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span></span>
    637. 

  637.     <span class="token selector">.border-top-1px</span>
    638. 

  638.       <span class="token selector">&amp;:before</span>
    639. 

  639.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    640. 

  640.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.5</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    641. 

  641.     <span class="token selector">.border-bottom-1px</span>
    642. 

  642.       <span class="token selector">&amp;:after</span>
    643. 

  643.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    644. 

  644.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.5</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    645. 

  645. 

  646.   <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>-webkit-min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">)</span></span>
    647. 

  647.     <span class="token selector">.border-top-1px</span>
    648. 

  648.       <span class="token selector">&amp;:before</span>
    649. 

  649.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">%</span></span>
    650. 

  650.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.333</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    651. 

  651.     <span class="token selector">.border-bottom-1px</span>
    652. 

  652.       <span class="token selector">&amp;:after</span>
    653. 

  653.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">%</span></span>
    654. 

  654.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.333</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    655. 

  655. 

  656.   <span class="token selector">.example-list</span>
    657. 

  657.     <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
    658. 

  658.     <span class="token property-declaration"><span class="token property">justify-content</span><span class="token punctuation">:</span> space-between</span>
    659. 

  659.     <span class="token property-declaration"><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap</span>
    660. 

  660.     <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">rem</span></span>
    661. 

  661. 

  662.     <span class="token selector">.example-item</span>
    663. 

  663.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token color">white</span></span>
    664. 

  664.       <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token unit">rem</span></span>
    665. 

  665.       <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.1</span><span class="token punctuation">)</span></span></span>
    666. 

  666.       <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span><span class="token unit">px</span> <span class="token number">2</span><span class="token unit">px</span> <span class="token number">0</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0.1</span><span class="token punctuation">)</span></span></span>
    667. 

  667.       <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    668. 

  668.       <span class="token property-declaration"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">rem</span></span>
    669. 

  669.       <span class="token property-declaration"><span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span></span>
    670. 

  670.       <span class="token selector">&amp;.placeholder</span>
    671. 

  671.         <span class="token property-declaration"><span class="token property">visibility</span><span class="token punctuation">:</span> hidden</span>
    672. 

  672.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    673. 

  673.         <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    674. 

  674.         <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    675. 

  675. 

  676.   <span class="token selector">.picker</span>
    677. 

  677.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> fixed</span>
    678. 

  678.     <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    679. 

  679.     <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    680. 

  680.     <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">100</span></span>
    681. 

  681.     <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    682. 

  682.     <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    683. 

  683.     <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    684. 

  684.     <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    685. 

  685.     <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span></span>
    686. 

  686.     <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">38</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">.4</span><span class="token punctuation">)</span></span></span>
    687. 

  687.     <span class="token selector">&amp;.picker-fade-enter<span class="token punctuation">,</span> &amp;.picker-fade-leave-active</span>
    688. 

  688.       <span class="token property-declaration"><span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    689. 

  689.     <span class="token selector">&amp;.picker-fade-enter-active<span class="token punctuation">,</span> &amp;.picker-fade-leave-active</span>
    690. 

  690.       <span class="token property-declaration"><span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease-<span class="token operator">in</span>-out</span>
    691. 

  691. 

  692.     <span class="token selector">.picker-panel</span>
    693. 

  693.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    694. 

  694.       <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">600</span></span>
    695. 

  695.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    696. 

  696.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    697. 

  697.       <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">273</span><span class="token unit">px</span></span>
    698. 

  698.       <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">white</span></span>
    699. 

  699.       <span class="token selector">&amp;.picker-move-enter<span class="token punctuation">,</span> &amp;.picker-move-leave-active</span>
    700. 

  700.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">273</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span></span>
    701. 

  701.       <span class="token selector">&amp;.picker-move-enter-active<span class="token punctuation">,</span> &amp;.picker-move-leave-active</span>
    702. 

  702.         <span class="token property-declaration"><span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease-<span class="token operator">in</span>-out</span>
    703. 

  703.       <span class="token selector">.picker-choose</span>
    704. 

  704.         <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    705. 

  705.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    706. 

  706.         <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span></span>
    707. 

  707.         <span class="token selector">.picker-title</span>
    708. 

  708.           <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    709. 

  709.           <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    710. 

  710.           <span class="token property-declaration"><span class="token property">font-weight</span><span class="token punctuation">:</span> normal</span>
    711. 

  711.           <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    712. 

  712.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span></span>
    713. 

  713.           <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span></span>
    714. 

  714.         <span class="token selector">.confirm<span class="token punctuation">,</span> .cancel</span>
    715. 

  715.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    716. 

  716.           <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">6</span><span class="token unit">px</span></span>
    717. 

  717.           <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">16</span><span class="token unit">px</span></span>
    718. 

  718.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span></span>
    719. 

  719.         <span class="token selector">.confirm</span>
    720. 

  720.           <span class="token property-declaration"><span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    721. 

  721.           <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#007bff</span></span>
    722. 

  722.           <span class="token selector">&amp;:active</span>
    723. 

  723.             <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#5aaaff</span></span>
    724. 

  724.         <span class="token selector">.cancel</span>
    725. 

  725.           <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    726. 

  726.           <span class="token selector">&amp;:active</span>
    727. 

  727.             <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#c2c2c2</span></span>
    728. 

  728.       <span class="token selector">.picker-content</span>
    729. 

  729.         <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    730. 

  730.         <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    731. 

  731.         <span class="token selector">.mask-top<span class="token punctuation">,</span> .mask-bottom</span>
    732. 

  732.           <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">10</span></span>
    733. 

  733.           <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    734. 

  734.           <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">68</span><span class="token unit">px</span></span>
    735. 

  735.           <span class="token property-declaration"><span class="token property">pointer-events</span><span class="token punctuation">:</span> none</span>
    736. 

  736.           <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span>
    737. 

  737.         <span class="token selector">.mask-top</span>
    738. 

  738.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    739. 

  739.           <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    740. 

  740.           <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top<span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span>
    741. 

  741.         <span class="token selector">.mask-bottom</span>
    742. 

  742.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    743. 

  743.           <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span></span>
    744. 

  744.           <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom<span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span>
    745. 

  745.       <span class="token selector">.wheel-wrapper</span>
    746. 

  746.         <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
    747. 

  747.         <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">16</span><span class="token unit">px</span></span>
    748. 

  748.         <span class="token selector">.wheel</span>
    749. 

  749.           <span class="token property-declaration"><span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span></span>
    750. 

  750.           <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">%</span></span>
    751. 

  751.           <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">173</span><span class="token unit">px</span></span>
    752. 

  752.           <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    753. 

  753.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span></span>
    754. 

  754.           <span class="token selector">.wheel-scroll</span>
    755. 

  755.             <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    756. 

  756.             <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">68</span><span class="token unit">px</span></span>
    757. 

  757.             <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">36</span><span class="token unit">px</span></span>
    758. 

  758.             <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    759. 

  759.             <span class="token selector">.wheel-item</span>
    760. 

  760.               <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    761. 

  761.               <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">36</span><span class="token unit">px</span></span>
    762. 

  762.               <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    763. 

  763.               <span class="token property-declaration"><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap</span>
    764. 

  764.               <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span></span>
    765. 

  765.               <span class="token selector">&amp;.wheel-disabled-item</span>
    766. 

  766.                 <span class="token property-declaration"><span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">.2</span><span class="token punctuation">;</span></span>
    767. 

  767.     <span class="token selector">.picker-footer</span>
    768. 

  768.       <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    769. 

  769. &lt;/style&gt;</code></pre></div></div> <i class="demo-code-content-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#ccc"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></i> <!----></div></div> <div class="demo-main"><div class="demo-component-wrap"></div></div></div> <p>示例是一个两列的选择器，JS 逻辑部分与单列选择器没有多大的区别，你会发现这个两列选择器之间是没有任何关联，因为它们是两个不同的 BetterScroll 实例。如果你想要实现省市联动的效果，那么得加上一部分代码，让这两个 BetterScroll 实例能够关联起来。请看下一个例子：</p></li> <li><p><strong>城市联动选择器</strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_cmd6tln7tr" aria-hidden="true" tabindex="0" class="tooltip popover vue-popover-theme" style="visibility:hidden;"><div class="wrapper"><div class="tooltip-inner popover-inner" style="position:relative;"><div><div></div></div> <div tabindex="-1" class="resize-observer" data-v-8859cc6c></div></div> <div class="tooltip-arrow popover-arrow"></div></div></div></div> <i class="demo-nav-btn icon-preview"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></i></div> <div class="demo-code" style="display:none;"><div class="demo-code-nav"><button class="demo-code-btn active">Template</button><button class="demo-code-btn">Script</button><button class="demo-code-btn">Style</button></div> <div class="demo-code-content"><div class="demo-code-item" style="display:;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    770. 

  770.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    771. 

  771.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>example-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    772. 

  772.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>example-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>show<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    773. 

  773.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>open<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{selectedText}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    774. 

  774.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    775. 

  775.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    776. 

  776.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-fade<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    777. 

  777.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>state===1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@touchmove.prevent</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_cancel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    778. 

  778.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-move<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    779. 

  779.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-panel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>state===1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click.stop</span><span class="token punctuation">&gt;</span></span>
    780. 

  780.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-choose border-bottom-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    781. 

  781.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cancel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_cancel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    782. 

  782.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>confirm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_confirm<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    783. 

  783.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    784. 

  784.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    785. 

  785.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    786. 

  786.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask-top border-bottom-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    787. 

  787.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask-bottom border-top-1px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    788. 

  788.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-wrapper<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheelWrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    789. 

  789.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(data, index) in pickerData<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    790. 

  790.                   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    791. 

  791.                     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span>
    792. 

  792.                       <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in data<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.value<span class="token punctuation">&quot;</span></span>
    793. 

  793.                       <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{'wheel-disabled-item':item.disabled}<span class="token punctuation">&quot;</span></span>
    794. 

  794.                       <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wheel-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.text}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    795. 

  795.                   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    796. 

  796.                 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    797. 

  797.               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    798. 

  798.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    799. 

  799.             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>picker-footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    800. 

  800.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    801. 

  801.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    802. 

  802.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    803. 

  803.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
    804. 

  804.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    805. 

  805. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/ecmascript-6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    806. 

  806.   <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    807. 

  807.   <span class="token keyword">import</span> Wheel <span class="token keyword">from</span> <span class="token string">'@better-scroll/wheel'</span>
    808. 

  808.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Wheel<span class="token punctuation">)</span>
    809. 

  809. 

  810.   <span class="token keyword">const</span> <span class="token constant">STATE_HIDE</span> <span class="token operator">=</span> <span class="token number">0</span>
    811. 

  811.   <span class="token keyword">const</span> <span class="token constant">STATE_SHOW</span> <span class="token operator">=</span> <span class="token number">1</span>
    812. 

  812. 

  813.   <span class="token keyword">const</span> <span class="token constant">COMPONENT_NAME</span> <span class="token operator">=</span> <span class="token string">'picker'</span>
    814. 

  814.   <span class="token keyword">const</span> <span class="token constant">EVENT_SELECT</span> <span class="token operator">=</span> <span class="token string">'select'</span>
    815. 

  815.   <span class="token keyword">const</span> <span class="token constant">EVENT_CANCEL</span> <span class="token operator">=</span> <span class="token string">'cancel'</span>
    816. 

  816.   <span class="token keyword">const</span> <span class="token constant">EVENT_CHANGE</span> <span class="token operator">=</span> <span class="token string">'change'</span>
    817. 

  817. 

  818.   <span class="token keyword">const</span> <span class="token constant">DATA</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    819. 

  819.     <span class="token punctuation">{</span>
    820. 

  820.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'北京市'</span><span class="token punctuation">,</span>
    821. 

  821.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'110000'</span><span class="token punctuation">,</span>
    822. 

  822.       <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    823. 

  823.         <span class="token punctuation">{</span>
    824. 

  824.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&quot;北京市&quot;</span><span class="token punctuation">,</span>
    825. 

  825.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'110100'</span>
    826. 

  826.         <span class="token punctuation">}</span>
    827. 

  827.       <span class="token punctuation">]</span>
    828. 

  828.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    829. 

  829.     <span class="token punctuation">{</span>
    830. 

  830.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'天津市'</span><span class="token punctuation">,</span>
    831. 

  831.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'120000'</span><span class="token punctuation">,</span>
    832. 

  832.       <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    833. 

  833.         <span class="token punctuation">{</span>
    834. 

  834.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">&quot;天津市&quot;</span><span class="token punctuation">,</span>
    835. 

  835.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'120000'</span>
    836. 

  836.         <span class="token punctuation">}</span>
    837. 

  837.       <span class="token punctuation">]</span>
    838. 

  838.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    839. 

  839.     <span class="token punctuation">{</span>
    840. 

  840.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'河北省'</span><span class="token punctuation">,</span>
    841. 

  841.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130000'</span><span class="token punctuation">,</span>
    842. 

  842.       <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    843. 

  843.         <span class="token punctuation">{</span>
    844. 

  844.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'石家庄市'</span><span class="token punctuation">,</span>
    845. 

  845.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130100'</span>
    846. 

  846.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    847. 

  847.         <span class="token punctuation">{</span>
    848. 

  848.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'唐山市'</span><span class="token punctuation">,</span>
    849. 

  849.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130200'</span>
    850. 

  850.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    851. 

  851.         <span class="token punctuation">{</span>
    852. 

  852.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'秦皇岛市'</span><span class="token punctuation">,</span>
    853. 

  853.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130300'</span>
    854. 

  854.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    855. 

  855.         <span class="token punctuation">{</span>
    856. 

  856.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'邯郸市'</span><span class="token punctuation">,</span>
    857. 

  857.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130400'</span>
    858. 

  858.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    859. 

  859.         <span class="token punctuation">{</span>
    860. 

  860.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'邢台市'</span><span class="token punctuation">,</span>
    861. 

  861.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130500'</span>
    862. 

  862.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    863. 

  863.         <span class="token punctuation">{</span>
    864. 

  864.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'保定市'</span><span class="token punctuation">,</span>
    865. 

  865.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130600'</span>
    866. 

  866.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    867. 

  867.         <span class="token punctuation">{</span>
    868. 

  868.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'张家口市'</span><span class="token punctuation">,</span>
    869. 

  869.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130700'</span>
    870. 

  870.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    871. 

  871.         <span class="token punctuation">{</span>
    872. 

  872.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'承德市'</span><span class="token punctuation">,</span>
    873. 

  873.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'130800'</span>
    874. 

  874.         <span class="token punctuation">}</span>
    875. 

  875.       <span class="token punctuation">]</span>
    876. 

  876.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    877. 

  877.     <span class="token punctuation">{</span>
    878. 

  878.       <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'山西省'</span><span class="token punctuation">,</span>
    879. 

  879.       <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140000'</span><span class="token punctuation">,</span>
    880. 

  880.       <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    881. 

  881.         <span class="token punctuation">{</span>
    882. 

  882.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'太原市'</span><span class="token punctuation">,</span>
    883. 

  883.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140100'</span>
    884. 

  884.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    885. 

  885.         <span class="token punctuation">{</span>
    886. 

  886.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'大同市'</span><span class="token punctuation">,</span>
    887. 

  887.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140200'</span>
    888. 

  888.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    889. 

  889.         <span class="token punctuation">{</span>
    890. 

  890.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'阳泉市'</span><span class="token punctuation">,</span>
    891. 

  891.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140300'</span>
    892. 

  892.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    893. 

  893.         <span class="token punctuation">{</span>
    894. 

  894.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'长治市'</span><span class="token punctuation">,</span>
    895. 

  895.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140400'</span>
    896. 

  896.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    897. 

  897.         <span class="token punctuation">{</span>
    898. 

  898.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'晋城市'</span><span class="token punctuation">,</span>
    899. 

  899.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140500'</span>
    900. 

  900.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    901. 

  901.         <span class="token punctuation">{</span>
    902. 

  902.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'朔州市'</span><span class="token punctuation">,</span>
    903. 

  903.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140600'</span>
    904. 

  904.         <span class="token punctuation">}</span><span class="token punctuation">,</span>
    905. 

  905.         <span class="token punctuation">{</span>
    906. 

  906.           <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'晋中市'</span><span class="token punctuation">,</span>
    907. 

  907.           <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'140700'</span>
    908. 

  908.         <span class="token punctuation">}</span>
    909. 

  909.       <span class="token punctuation">]</span>
    910. 

  910.     <span class="token punctuation">}</span>
    911. 

  911.   <span class="token punctuation">]</span>
    912. 

  912. 

  913.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    914. 

  914.     <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token constant">COMPONENT_NAME</span><span class="token punctuation">,</span>
    915. 

  915.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    916. 

  916.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    917. 

  917.         <span class="token literal-property property">state</span><span class="token operator">:</span> <span class="token constant">STATE_HIDE</span><span class="token punctuation">,</span>
    918. 

  918.         <span class="token literal-property property">selectedIndexPair</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    919. 

  919.         <span class="token literal-property property">selectedText</span><span class="token operator">:</span> <span class="token string">'open'</span><span class="token punctuation">,</span>
    920. 

  920.         <span class="token literal-property property">pickerData</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    921. 

  921.       <span class="token punctuation">}</span>
    922. 

  922.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    923. 

  923.     <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    924. 

  924.       <span class="token comment">// generate data</span>
    925. 

  925.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_loadPickerData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndexPair<span class="token punctuation">,</span> <span class="token keyword">undefined</span> <span class="token comment">/* no prevSelectedIndex due to instantiating */</span><span class="token punctuation">)</span>
    926. 

  926.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    927. 

  927.     <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    928. 

  928.       <span class="token function">_loadPickerData</span> <span class="token punctuation">(</span><span class="token parameter">newIndexPair<span class="token punctuation">,</span> oldIndexPair</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    929. 

  929.         <span class="token keyword">let</span> provinces
    930. 

  930.         <span class="token keyword">let</span> cities
    931. 

  931.         <span class="token comment">// first instantiated</span>
    932. 

  932.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>oldIndexPair<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    933. 

  933.           provinces <span class="token operator">=</span> <span class="token constant">DATA</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> value<span class="token punctuation">,</span> text <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> value<span class="token punctuation">,</span> text <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    934. 

  934.           cities <span class="token operator">=</span> <span class="token constant">DATA</span><span class="token punctuation">[</span>newIndexPair<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span>children
    935. 

  935.           <span class="token keyword">this</span><span class="token punctuation">.</span>pickerData <span class="token operator">=</span> <span class="token punctuation">[</span>provinces<span class="token punctuation">,</span> cities<span class="token punctuation">]</span>
    936. 

  936.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    937. 

  937.           <span class="token comment">// provinces'index changed, refresh cities data</span>
    938. 

  938.           <span class="token keyword">if</span> <span class="token punctuation">(</span>newIndexPair<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">!==</span> oldIndexPair<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    939. 

  939.             cities <span class="token operator">=</span> <span class="token constant">DATA</span><span class="token punctuation">[</span>newIndexPair<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span>children
    940. 

  940.             <span class="token keyword">this</span><span class="token punctuation">.</span>pickerData<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> cities<span class="token punctuation">)</span>
    941. 

  941.             <span class="token comment">// Since cities data changed</span>
    942. 

  942.             <span class="token comment">// refresh better-scroll to recaculate scrollHeight</span>
    943. 

  943.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    944. 

  944.               <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    945. 

  945.             <span class="token punctuation">}</span><span class="token punctuation">)</span>
    946. 

  946.           <span class="token punctuation">}</span>
    947. 

  947.         <span class="token punctuation">}</span>
    948. 

  948.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    949. 

  949.       <span class="token function">_confirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    950. 

  950.         <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    951. 

  951.           <span class="token comment">/*
    952. 

  952.           * if bs is scrolling, force it stop at the nearest wheel-item
    953. 

  953.           * or you can use 'restorePosition' method as the below
    954. 

  954.           */</span>
    955. 

  955.           <span class="token comment">// wheel.stop()</span>
    956. 

  956.           <span class="token comment">/*
    957. 

  957.           * if bs is scrolling, restore it to the start position
    958. 

  958.           * it is same with iOS picker and web Select element implementation
    959. 

  959.           * supported at v2.1.0
    960. 

  960.           */</span>
    961. 

  961.           wheel<span class="token punctuation">.</span><span class="token function">restorePosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    962. 

  962.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    963. 

  963.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    964. 

  964. 

  965.         <span class="token keyword">const</span> currentSelectedIndexPair <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndexPair <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    966. 

  966.           <span class="token keyword">return</span> wheel<span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    967. 

  967.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    968. 

  968. 

  969.         <span class="token keyword">this</span><span class="token punctuation">.</span>selectedText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pickerData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    970. 

  970.           <span class="token keyword">const</span> index <span class="token operator">=</span> currentSelectedIndexPair<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    971. 

  971.           <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>text<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
    972. 

  972.         <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'__'</span><span class="token punctuation">)</span>
    973. 

  973.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_SELECT</span><span class="token punctuation">,</span> currentSelectedIndexPair<span class="token punctuation">)</span>
    974. 

  974.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    975. 

  975.       <span class="token function">_cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    976. 

  976.         <span class="token comment">/*
    977. 

  977.          * if bs is scrolling, restore it to the start position
    978. 

  978.          * it is same with iOS picker and web Select element implementation
    979. 

  979.          * supported at v2.1.0
    980. 

  980.         */</span>
    981. 

  981.         <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    982. 

  982.           wheel<span class="token punctuation">.</span><span class="token function">restorePosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    983. 

  983.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    984. 

  984.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    985. 

  985.         <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_CANCEL</span><span class="token punctuation">)</span>
    986. 

  986.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    987. 

  987.       <span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    988. 

  988.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">===</span> <span class="token constant">STATE_SHOW</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    989. 

  989.           <span class="token keyword">return</span>
    990. 

  990.         <span class="token punctuation">}</span>
    991. 

  991.         <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token constant">STATE_SHOW</span>
    992. 

  992.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    993. 

  993.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    994. 

  994.             <span class="token keyword">this</span><span class="token punctuation">.</span>wheels <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    995. 

  995.             <span class="token keyword">let</span> wheelWrapper <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>wheelWrapper
    996. 

  996.             <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pickerData<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    997. 

  997.               <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_createWheel</span><span class="token punctuation">(</span>wheelWrapper<span class="token punctuation">,</span> i<span class="token punctuation">)</span>
    998. 

  998.             <span class="token punctuation">}</span>
    999. 

  999.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1000. 

  1000.         <span class="token punctuation">}</span>
    1001. 

  1001.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1002. 

  1002.       <span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1003. 

  1003.         <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token constant">STATE_HIDE</span>
    1004. 

  1004.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1005. 

  1005.       <span class="token function">_createWheel</span><span class="token punctuation">(</span><span class="token parameter">wheelWrapper<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1006. 

  1006.         <span class="token keyword">const</span> wheels <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheels
    1007. 

  1007.         <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    1008. 

  1008.           wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span>wheelWrapper<span class="token punctuation">.</span>children<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1009. 

  1009.             <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    1010. 

  1010.               <span class="token literal-property property">selectedIndex</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndexPair<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>
    1011. 

  1011.               <span class="token literal-property property">wheelWrapperClass</span><span class="token operator">:</span> <span class="token string">'wheel-scroll'</span><span class="token punctuation">,</span>
    1012. 

  1012.               <span class="token literal-property property">wheelItemClass</span><span class="token operator">:</span> <span class="token string">'wheel-item'</span>
    1013. 

  1013.             <span class="token punctuation">}</span><span class="token punctuation">,</span>
    1014. 

  1014.             <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span>
    1015. 

  1015.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1016. 

  1016.           <span class="token comment">// when any of wheels'scrolling ended , refresh data</span>
    1017. 

  1017.           <span class="token keyword">let</span> prevSelectedIndexPair <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedIndexPair
    1018. 

  1018.           wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollEnd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1019. 

  1019.             <span class="token keyword">const</span> currentSelectedIndexPair <span class="token operator">=</span> wheels<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">wheel</span> <span class="token operator">=&gt;</span> wheel<span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1020. 

  1020.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_loadPickerData</span><span class="token punctuation">(</span>currentSelectedIndexPair<span class="token punctuation">,</span> prevSelectedIndexPair<span class="token punctuation">)</span>
    1021. 

  1021.             prevSelectedIndexPair <span class="token operator">=</span> currentSelectedIndexPair
    1022. 

  1022.             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token constant">EVENT_CHANGE</span><span class="token punctuation">,</span> i<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    1023. 

  1023.           <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1024. 

  1024.         <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    1025. 

  1025.           wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1026. 

  1026.         <span class="token punctuation">}</span>
    1027. 

  1027.         <span class="token keyword">return</span> wheels<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
    1028. 

  1028.       <span class="token punctuation">}</span>
    1029. 

  1029.     <span class="token punctuation">}</span>
    1030. 

  1030.   <span class="token punctuation">}</span>
    1031. 

  1031. </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre></div></div><div class="demo-code-item" style="display:none;"><div class="language-styl extra-class"><pre class="language-styl"><code>&lt;style scoped lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    1032. 

  1032. 

  1033.   <span class="token selector"><span class="token comment">/* reset */</span>
    1034. 

  1034.   ul</span>
    1035. 

  1035.     <span class="token property-declaration"><span class="token property">list-style</span> none</span>
    1036. 

  1036.     <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span></span>
    1037. 

  1037. 

  1038.   <span class="token selector">.border-bottom-1px<span class="token punctuation">,</span> .border-top-1px</span>
    1039. 

  1039.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    1040. 

  1040.     <span class="token selector">&amp;:before<span class="token punctuation">,</span> &amp;:after</span>
    1041. 

  1041.       <span class="token property-declaration"><span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span></span>
    1042. 

  1042.       <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> block</span>
    1043. 

  1043.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    1044. 

  1044.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span></span>
    1045. 

  1045.   <span class="token selector">.border-bottom-1px</span>
    1046. 

  1046.     <span class="token selector">&amp;:after</span>
    1047. 

  1047.       <span class="token property-declaration"><span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ebebeb</span></span>
    1048. 

  1048.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1049. 

  1049.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1050. 

  1050.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    1051. 

  1051.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> bottom</span>
    1052. 

  1052.   <span class="token selector">.border-top-1px</span>
    1053. 

  1053.     <span class="token selector">&amp;:before</span>
    1054. 

  1054.       <span class="token property-declaration"><span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ebebeb</span></span>
    1055. 

  1055.       <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1056. 

  1056.       <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1057. 

  1057.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    1058. 

  1058.       <span class="token property-declaration"><span class="token property">transform-origin</span><span class="token punctuation">:</span> <span class="token number">0</span> top</span>
    1059. 

  1059.   <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>-webkit-min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span></span>
    1060. 

  1060.     <span class="token selector">.border-top-1px</span>
    1061. 

  1061.       <span class="token selector">&amp;:before</span>
    1062. 

  1062.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    1063. 

  1063.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.5</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    1064. 

  1064.     <span class="token selector">.border-bottom-1px</span>
    1065. 

  1065.       <span class="token selector">&amp;:after</span>
    1066. 

  1066.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    1067. 

  1067.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.5</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    1068. 

  1068. 

  1069.   <span class="token atrule-declaration"><span class="token atrule">@media</span> <span class="token punctuation">(</span>-webkit-min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>min-device-pixel-ratio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">)</span></span>
    1070. 

  1070.     <span class="token selector">.border-top-1px</span>
    1071. 

  1071.       <span class="token selector">&amp;:before</span>
    1072. 

  1072.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">%</span></span>
    1073. 

  1073.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.333</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    1074. 

  1074.     <span class="token selector">.border-bottom-1px</span>
    1075. 

  1075.       <span class="token selector">&amp;:after</span>
    1076. 

  1076.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">%</span></span>
    1077. 

  1077.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">scale</span><span class="token punctuation">(</span><span class="token number">.333</span><span class="token punctuation">)</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span></span>
    1078. 

  1078. 

  1079.   <span class="token selector">.example-list</span>
    1080. 

  1080.     <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
    1081. 

  1081.     <span class="token property-declaration"><span class="token property">justify-content</span><span class="token punctuation">:</span> space-between</span>
    1082. 

  1082.     <span class="token property-declaration"><span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap</span>
    1083. 

  1083.     <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">rem</span></span>
    1084. 

  1084. 

  1085.     <span class="token selector">.example-item</span>
    1086. 

  1086.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token color">white</span></span>
    1087. 

  1087.       <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token unit">rem</span></span>
    1088. 

  1088.       <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">.1</span><span class="token punctuation">)</span></span></span>
    1089. 

  1089.       <span class="token property-declaration"><span class="token property">box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">1</span><span class="token unit">px</span> <span class="token number">2</span><span class="token unit">px</span> <span class="token number">0</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0.1</span><span class="token punctuation">)</span></span></span>
    1090. 

  1090.       <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    1091. 

  1091.       <span class="token property-declaration"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">rem</span></span>
    1092. 

  1092.       <span class="token property-declaration"><span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span></span>
    1093. 

  1093.       <span class="token selector">&amp;.placeholder</span>
    1094. 

  1094.         <span class="token property-declaration"><span class="token property">visibility</span><span class="token punctuation">:</span> hidden</span>
    1095. 

  1095.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1096. 

  1096.         <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1097. 

  1097.         <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1098. 

  1098. 

  1099.   <span class="token selector">.picker</span>
    1100. 

  1100.     <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> fixed</span>
    1101. 

  1101.     <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1102. 

  1102.     <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1103. 

  1103.     <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">100</span></span>
    1104. 

  1104.     <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    1105. 

  1105.     <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    1106. 

  1106.     <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    1107. 

  1107.     <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    1108. 

  1108.     <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span></span>
    1109. 

  1109.     <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">37</span><span class="token punctuation">,</span> <span class="token number">38</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">.4</span><span class="token punctuation">)</span></span></span>
    1110. 

  1110.     <span class="token selector">&amp;.picker-fade-enter<span class="token punctuation">,</span> &amp;.picker-fade-leave-active</span>
    1111. 

  1111.       <span class="token property-declaration"><span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1112. 

  1112.     <span class="token selector">&amp;.picker-fade-enter-active<span class="token punctuation">,</span> &amp;.picker-fade-leave-active</span>
    1113. 

  1113.       <span class="token property-declaration"><span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease-<span class="token operator">in</span>-out</span>
    1114. 

  1114. 

  1115.     <span class="token selector">.picker-panel</span>
    1116. 

  1116.       <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    1117. 

  1117.       <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">600</span></span>
    1118. 

  1118.       <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1119. 

  1119.       <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    1120. 

  1120.       <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">273</span><span class="token unit">px</span></span>
    1121. 

  1121.       <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">white</span></span>
    1122. 

  1122.       <span class="token selector">&amp;.picker-move-enter<span class="token punctuation">,</span> &amp;.picker-move-leave-active</span>
    1123. 

  1123.         <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">translate3d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">273</span><span class="token unit">px</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span></span></span>
    1124. 

  1124.       <span class="token selector">&amp;.picker-move-enter-active<span class="token punctuation">,</span> &amp;.picker-move-leave-active</span>
    1125. 

  1125.         <span class="token property-declaration"><span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span><span class="token unit">s</span> ease-<span class="token operator">in</span>-out</span>
    1126. 

  1126.       <span class="token selector">.picker-choose</span>
    1127. 

  1127.         <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    1128. 

  1128.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    1129. 

  1129.         <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span></span>
    1130. 

  1130.         <span class="token selector">.picker-title</span>
    1131. 

  1131.           <span class="token property-declaration"><span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1132. 

  1132.           <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span></span>
    1133. 

  1133.           <span class="token property-declaration"><span class="token property">font-weight</span><span class="token punctuation">:</span> normal</span>
    1134. 

  1134.           <span class="token property-declaration"><span class="token property">text-align</span><span class="token punctuation">:</span> center</span>
    1135. 

  1135.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span></span>
    1136. 

  1136.           <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span></span>
    1137. 

  1137.         <span class="token selector">.confirm<span class="token punctuation">,</span> .cancel</span>
    1138. 

  1138.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    1139. 

  1139.           <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">6</span><span class="token unit">px</span></span>
    1140. 

  1140.           <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">16</span><span class="token unit">px</span></span>
    1141. 

  1141.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span></span>
    1142. 

  1142.         <span class="token selector">.confirm</span>
    1143. 

  1143.           <span class="token property-declaration"><span class="token property">right</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1144. 

  1144.           <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#007bff</span></span>
    1145. 

  1145.           <span class="token selector">&amp;:active</span>
    1146. 

  1146.             <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#5aaaff</span></span>
    1147. 

  1147.         <span class="token selector">.cancel</span>
    1148. 

  1148.           <span class="token property-declaration"><span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1149. 

  1149.           <span class="token selector">&amp;:active</span>
    1150. 

  1150.             <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#c2c2c2</span></span>
    1151. 

  1151.       <span class="token selector">.picker-content</span>
    1152. 

  1152.         <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> relative</span>
    1153. 

  1153.         <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    1154. 

  1154.         <span class="token selector">.mask-top<span class="token punctuation">,</span> .mask-bottom</span>
    1155. 

  1155.           <span class="token property-declaration"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">10</span></span>
    1156. 

  1156.           <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span></span>
    1157. 

  1157.           <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">68</span><span class="token unit">px</span></span>
    1158. 

  1158.           <span class="token property-declaration"><span class="token property">pointer-events</span><span class="token punctuation">:</span> none</span>
    1159. 

  1159.           <span class="token property-declaration"><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">translateZ</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span></span></span>
    1160. 

  1160.         <span class="token selector">.mask-top</span>
    1161. 

  1161.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    1162. 

  1162.           <span class="token property-declaration"><span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1163. 

  1163.           <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to top<span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span>
    1164. 

  1164.         <span class="token selector">.mask-bottom</span>
    1165. 

  1165.           <span class="token property-declaration"><span class="token property">position</span><span class="token punctuation">:</span> absolute</span>
    1166. 

  1166.           <span class="token property-declaration"><span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span></span>
    1167. 

  1167.           <span class="token property-declaration"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token func"><span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom<span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token func"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span></span></span></span>
    1168. 

  1168.       <span class="token selector">.wheel-wrapper</span>
    1169. 

  1169.         <span class="token property-declaration"><span class="token property">display</span><span class="token punctuation">:</span> flex</span>
    1170. 

  1170.         <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">16</span><span class="token unit">px</span></span>
    1171. 

  1171.         <span class="token selector">.wheel</span>
    1172. 

  1172.           <span class="token property-declaration"><span class="token property">flex</span><span class="token punctuation">:</span> <span class="token number">1</span></span>
    1173. 

  1173.           <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">%</span></span>
    1174. 

  1174.           <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">173</span><span class="token unit">px</span></span>
    1175. 

  1175.           <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    1176. 

  1176.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</span><span class="token unit">px</span></span>
    1177. 

  1177.           <span class="token selector">.wheel-scroll</span>
    1178. 

  1178.             <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span></span>
    1179. 

  1179.             <span class="token property-declaration"><span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">68</span><span class="token unit">px</span></span>
    1180. 

  1180.             <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">36</span><span class="token unit">px</span></span>
    1181. 

  1181.             <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    1182. 

  1182.             <span class="token selector">.wheel-item</span>
    1183. 

  1183.               <span class="token property-declaration"><span class="token property">list-style</span><span class="token punctuation">:</span> none</span>
    1184. 

  1184.               <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">36</span><span class="token unit">px</span></span>
    1185. 

  1185.               <span class="token property-declaration"><span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span>
    1186. 

  1186.               <span class="token property-declaration"><span class="token property">white-space</span><span class="token punctuation">:</span> nowrap</span>
    1187. 

  1187.               <span class="token property-declaration"><span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span></span>
    1188. 

  1188.               <span class="token selector">&amp;.wheel-disabled-item</span>
    1189. 

  1189.                 <span class="token property-declaration"><span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">.2</span><span class="token punctuation">;</span></span>
    1190. 

  1190.     <span class="token selector">.picker-footer</span>
    1191. 

  1191.       <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    1192. 

  1192. &lt;/style&gt;</code></pre></div></div> <i class="demo-code-content-copy"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#ccc"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg></i> <!----></div></div> <div class="demo-main"><div class="demo-component-wrap"></div></div></div> <p>城市联动 Picker 的效果，必须通过 JS 部分逻辑将不同 BetterScroll 的实例联系起来，不管是省市，还是省市区的联动，亦是如此。</p></li></ul> <h2 id="wheel-选项对象"><a href="#wheel-选项对象" class="header-anchor">#</a> wheel 选项对象</h2> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>当 wheel 配置为 true 的时候，插件内部使用的是默认的插件选项对象。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> bs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1193. 

  1193.   <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1194. 

  1194. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1195. 

  1195. 

  1196. <span class="token comment">// 相当于</span>
    1197. 

  1197. 

  1198. <span class="token keyword">const</span> bs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1199. 

  1199.   <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    1200. 

  1200.     <span class="token literal-property property">wheelWrapperClass</span><span class="token operator">:</span> <span class="token string">'wheel-scroll'</span><span class="token punctuation">,</span>
    1201. 

  1201.     <span class="token literal-property property">wheelItemClass</span><span class="token operator">:</span> <span class="token string">'wheel-item'</span><span class="token punctuation">,</span>
    1202. 

  1202.     <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
    1203. 

  1203.     <span class="token literal-property property">adjustTime</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span>
    1204. 

  1204.     <span class="token literal-property property">selectedIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    1205. 

  1205.     <span class="token literal-property property">wheelDisabledItemClass</span><span class="token operator">:</span> <span class="token string">'wheel-disabled-item'</span>
    1206. 

  1206.   <span class="token punctuation">}</span>
    1207. 

  1207. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1208. 

  1208. </code></pre></div></div> <h3 id="selectedindex"><a href="#selectedindex" class="header-anchor">#</a> selectedIndex</h3> <ul><li><strong>类型</strong>：<code>number</code></li> <li><strong>默认值</strong>：<code>0</code></li></ul> <p>实例化 Wheel，默认选中第 selectedIndex 项，索引从 0 开始。</p> <h3 id="rotate"><a href="#rotate" class="header-anchor">#</a> rotate</h3> <ul><li><strong>类型</strong>：<code>number</code></li> <li><strong>默认值</strong>：<code>25</code></li></ul> <p>当滚动 wheel 时，wheel item 的弯曲程度。</p> <h3 id="adjusttime"><a href="#adjusttime" class="header-anchor">#</a> adjustTime</h3> <ul><li><strong>类型</strong>：<code>number</code></li> <li><strong>默认值</strong>：<code>400</code>(ms)</li></ul> <p>当点击某一项的时候，滚动过去的动画时长。</p> <h3 id="wheelwrapperclass"><a href="#wheelwrapperclass" class="header-anchor">#</a> wheelWrapperClass</h3> <ul><li><strong>类型</strong>：<code>string</code></li> <li><strong>默认值</strong>：<code>wheel-scroll</code></li></ul> <p>滚动元素的 className，这里的「滚动元素」 指的就是 BetterScroll 的 content 元素。</p> <h3 id="wheelitemclass"><a href="#wheelitemclass" class="header-anchor">#</a> wheelItemClass</h3> <ul><li><strong>类型</strong>：<code>string</code></li> <li><strong>默认值</strong>：<code>wheel-item</code></li></ul> <p>滚动元素的子元素的样式。</p> <h3 id="wheeldisableditemclass"><a href="#wheeldisableditemclass" class="header-anchor">#</a> wheelDisabledItemClass</h3> <ul><li><strong>类型</strong>：<code>string</code></li> <li><strong>默认值</strong>：<code>wheel-disabled-item</code></li></ul> <p>滚动元素中想要禁用的子元素，类似于 <code>select</code> 元素中禁用的 <code>option</code> 效果。wheel 插件的内部根据 <code>wheelDisabledItemClass</code> 配置来判断是否将该项指定为 disabled 状态。</p> <h2 id="实例方法"><a href="#实例方法" class="header-anchor">#</a> 实例方法</h2> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>以下方法皆已代理至 BetterScroll 实例，例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    1209. 

  1209. <span class="token keyword">import</span> Wheel <span class="token keyword">from</span> <span class="token string">'@better-scroll/wheel'</span>
    1210. 

  1210. 

  1211. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Wheel<span class="token punctuation">)</span>
    1212. 

  1212. 

  1213. <span class="token keyword">const</span> bs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.bs-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1214. 

  1214.   <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1215. 

  1215. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1216. 

  1216. 

  1217. bs<span class="token punctuation">.</span><span class="token function">getSelectedIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    1218. 

  1218. bs<span class="token punctuation">.</span><span class="token function">wheelTo</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span>
    1219. 

  1219. </code></pre></div></div> <h3 id="getselectedindex"><a href="#getselectedindex" class="header-anchor">#</a> getSelectedIndex()</h3> <ul><li><strong>返回值</strong>：当前选中项的 index，下标从 0 开始</li></ul> <p>获取当前选中项的索引。</p> <h3 id="wheelto-index-0-time-0-ease"><a href="#wheelto-index-0-time-0-ease" class="header-anchor">#</a> wheelTo(index = 0, time = 0, [ease])</h3> <ul><li><strong>参数</strong>：
    1220. 

  1220. <ul><li><code>{ number } index</code>：选项索引</li> <li><code>{ number } time</code>：动画时长</li> <li><code>{ number } ease&lt;可选&gt;</code>：动画时长。缓动效果配置，参考 <a href="https://github.com/ustbhuangyi/better-scroll/blob/dev/packages/shared-utils/src/ease.ts" target="_blank" rel="noopener noreferrer">ease.ts<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a>，默认是 <code>bounce</code> 效果</li></ul></li></ul> <p>滚动至对应索引的列表项。</p> <h3 id="stop"><a href="#stop" class="header-anchor">#</a> stop() <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></h3> <p>强制让滚动的 BetterScroll 停止下来，并且吸附至当前距离最近的 wheel-item 的位置。</p> <h3 id="restoreposition"><a href="#restoreposition" class="header-anchor">#</a> restorePosition() <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></h3> <p>强制让滚动的 BetterScroll 停止下来，并且恢复至滚动开始前的位置。</p> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>以上两个方法只对处于<strong>滚动中的 BetterScroll</strong> 有效，并且 <code>restorePosition</code> 是与原生的 iOS picker 组件的效果一模一样，用户可以根据自己的需求选择对应的方法。</p></div> <h2 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h2> <h3 id="wheelindexchanged"><a href="#wheelindexchanged" class="header-anchor">#</a> wheelIndexChanged <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></h3> <ul><li><strong>参数</strong>：当前选中的 wheel-item 的索引。</li> <li><strong>触发时机</strong>：当列表项发生改变的时候。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    1221. 

  1221. <span class="token keyword">import</span> Wheel <span class="token keyword">from</span> <span class="token string">'@better-scroll/wheel'</span>
    1222. 

  1222. 

  1223. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Wheel<span class="token punctuation">)</span>
    1224. 

  1224. 

  1225. <span class="token keyword">const</span> bs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.bs-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    1226. 

  1226.   <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1227. 

  1227. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1228. 

  1228. 

  1229. bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'wheelIndexChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    1230. 

  1230.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span>
    1231. 

  1231. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1232. 

  1232. </code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/ustbhuangyi/better-scroll/edit/dev/packages/vuepress-docs/docs/zh-CN/plugins/wheel.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/2/1 23:07:17</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    1233. 

  1233.       ←
    1234. 

  1234.       <a href="/docs/zh-CN/plugins/slide.html" class="prev">
    1235. 

  1235.         slide
    1236. 

  1236.       </a></span> <span class="next"><a href="/docs/zh-CN/plugins/zoom.html">
    1237. 

  1237.         zoom
    1238. 

  1238.       </a>
    1239. 

  1239.       →
    1240. 

  1240.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    1241. 

  1241.     <script src="/docs/assets/js/app.c71b64d3.js" defer></script><script src="/docs/assets/js/5.d6412664.js" defer></script><script src="/docs/assets/js/4.4855b9ef.js" defer></script><script src="/docs/assets/js/3.481632b4.js" defer></script><script src="/docs/assets/js/121.e41f8100.js" defer></script><script src="/docs/assets/js/56.cd04bae9.js" defer></script><script src="/docs/assets/js/7.518ccda7.js" defer></script>
    1242. 

  1242.   </body>
    1243. 

  1243. </html>
    1244.