Startsida Utforska Hjälp
Registrera dig Logga in
wicresoft
/
doc_project
2
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Träd: 9cd9c7d1d5
Grenar Taggar
doc_project
/
better-scroll-docs
/
en-US
/
plugins
/
wheel.html

wheel.html 250 KB
Historik Rå

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    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/96.6e382fd5.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/121.e41f8100.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/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/en-US/" 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/en-US/guide/" class="nav-link">
    23. 

  23.   Guide
    24. 

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

  25.   Plugin
    26. 

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

  27.   FAQ
    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.   Discuss
    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">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</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" aria-current="page" class="nav-link router-link-exact-active router-link-active">
    31. 

  31.   English
    32. 

  32. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/wheel.html" class="nav-link">
    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/en-US/guide/" class="nav-link">
    37. 

  37.   Guide
    38. 

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

  39.   Plugin
    40. 

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

  41.   FAQ
    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.   Discuss
    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">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</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" aria-current="page" class="nav-link router-link-exact-active router-link-active">
    45. 

  45.   English
    46. 

  46. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/wheel.html" class="nav-link">
    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>Plugins Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/plugins/" aria-current="page" class="sidebar-link">plugins</a></li><li><a href="/docs/en-US/plugins/how-to-write.html" class="sidebar-link">How to write plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Plugins</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/plugins/mouse-wheel.html" class="sidebar-link">mouse-wheel</a></li><li><a href="/docs/en-US/plugins/observe-dom.html" class="sidebar-link">observe-dom</a></li><li><a href="/docs/en-US/plugins/observe-image.html" class="sidebar-link">observe-image</a></li><li><a href="/docs/en-US/plugins/pulldown.html" class="sidebar-link">pulldown</a></li><li><a href="/docs/en-US/plugins/pullup.html" class="sidebar-link">pullup</a></li><li><a href="/docs/en-US/plugins/scroll-bar.html" class="sidebar-link">scrollbar</a></li><li><a href="/docs/en-US/plugins/indicators.html" class="sidebar-link">indicators</a></li><li><a href="/docs/en-US/plugins/slide.html" class="sidebar-link">slide</a></li><li><a href="/docs/en-US/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/en-US/plugins/wheel.html#introduction" class="sidebar-link">Introduction</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/wheel.html#install" class="sidebar-link">Install</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/wheel.html#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/wheel.html#wheel-options" class="sidebar-link">wheel options</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/wheel.html#instance-methods" class="sidebar-link">Instance Methods</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/wheel.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/en-US/plugins/zoom.html" class="sidebar-link">zoom</a></li><li><a href="/docs/en-US/plugins/nested-scroll.html" class="sidebar-link">nested-scroll</a></li><li><a href="/docs/en-US/plugins/infinity.html" class="sidebar-link">infinity</a></li><li><a href="/docs/en-US/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="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h2> <p>The wheel plugin is the cornerstone for implementing similar iOS Picker components.</p> <h2 id="install"><a href="#install" class="header-anchor">#</a> Install</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="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <p>import <code>wheel</code>, then call <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>pass in the correct configuration in options, for example:</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</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 is <code>true</code> or object, otherwise the plugin is invalid, please refer to <a href="/docs/en-US/plugins/wheel.html#wheel-options">wheel options</a>.</p></div> <div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>BetterScroll combined with the Wheel plugin is just the JS logic part of the Picker effect, and the DOM template is user-implemented. Fortunately, for most Picker scenarios, we have corresponding examples.</p></div> <ul><li><p><strong>Basic usage</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_estolgjlod" 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>Single-column Picker is a more common effect. You can use <code>selectedIndex</code> to configure the item that initializes the corresponding index. <code>wheelDisabledItemClass</code> configures the item you want to disable to simulate the Web Select tag's disable option.</p></li> <li><p><strong>Double-column Picker</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_gzluoxo9ln" 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>The JS logic part is not much different from the single-column selector. You will find that there is no correlation between the two column selectors because they are two different BetterScroll instances. If you want to achieve the effect of the provincial and city linkage, then add a part of the code to make the two BetterScroll instances can be associated. Please see the next example:</p></li> <li><p><strong>Linkage Picker</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_nfg4hb61ca" 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>The effect of the city linkage Picker must be linked through the JS part of the logic to the different instances of BetterScroll.</p></li></ul> <h2 id="wheel-options"><a href="#wheel-options" class="header-anchor">#</a> wheel options</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>When <code>wheel</code> is configured as <code>true</code>, the plugin uses the default plugin option.</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">// equals</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>Type</strong>: <code>number</code></li> <li><strong>Default</strong>：<code>0</code></li></ul> <p>Instantiate the Wheel, the <code>selectedIndex</code> item is selected by default, and the index starts from 0.</p> <h3 id="rotate"><a href="#rotate" class="header-anchor">#</a> rotate</h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>25</code></li></ul> <p>When rolling the wheel, the degree of bending of the wheel item.</p> <h3 id="adjusttime"><a href="#adjusttime" class="header-anchor">#</a> adjustTime</h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>400</code>(ms)</li></ul> <p>When an item is clicked, the duration of scroll.</p> <h3 id="wheelwrapperclass"><a href="#wheelwrapperclass" class="header-anchor">#</a> wheelWrapperClass</h3> <ul><li><strong>Type</strong>: <code>string</code></li> <li><strong>Default</strong>: <code>wheel-scroll</code></li></ul> <p>The className of the scroll element, where &quot;scroll element&quot; refers to the <code>content</code> element of BetterScroll.</p> <h3 id="wheelitemclass"><a href="#wheelitemclass" class="header-anchor">#</a> wheelItemClass</h3> <ul><li><strong>Type</strong>: <code>string</code></li> <li><strong>Default</strong>: <code>wheel-item</code></li></ul> <p>The style of the child elements of the scroll element.</p> <h3 id="wheeldisableditemclass"><a href="#wheeldisableditemclass" class="header-anchor">#</a> wheelDisabledItemClass</h3> <ul><li><strong>Type</strong>: <code>string</code></li> <li><strong>Default</strong>: <code>wheel-disabled-item</code></li></ul> <p>The child element that you want to disable in the scroll element is similar to the effect of the disabled option in the select element. The wheel plugin judges whether the item is designated as disabled according to the <code>wheelDisabledItemClass</code> configuration.</p> <h2 id="instance-methods"><a href="#instance-methods" class="header-anchor">#</a> Instance Methods</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>All methods are proxied to BetterScroll instance, for example:</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>Returns</strong>: The index of the currently selected item, the subscript starts from 0</li></ul> <p>Get the index of the currently selected item.</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>Arguments</strong>:
    1220. 

  1220. <ul><li><code>{ number } index</code></li> <li><code>{ number } time</code>: Animation duration</li> <li><code>{ number } ease&lt;Optional&gt;</code>: Ease effect configuration, refer to <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>, the default is <code>bounce</code> effect</li></ul> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">EaseItem</span> <span class="token punctuation">{</span>
    1221. 

  1221.   style<span class="token operator">:</span> <span class="token builtin">string</span>
    1222. 

  1222.   <span class="token function">fn</span><span class="token punctuation">(</span>t<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">number</span>
    1223. 

  1223. <span class="token punctuation">}</span>
    1224. 

  1224. </code></pre></div></li></ul> <p>Scroll to the list item corresponding to the index.</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>Force the scrolling BetterScroll to stop and snap to the position of the wheel-item closest to the current one.</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>Force the scrolling BetterScroll to stop and return to the position before the scrolling started.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>The above two methods are only valid for <strong>the scrolling BetterScroll</strong>, and <code>restorePosition</code> is exactly the same as the original iOS Picker component. Users can choose the corresponding method according to their needs.</p></div> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</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>Arguments</strong>: The index of the current selected wheel-item.</li> <li><strong>Trigger timing</strong>: When the selected wheel-item changes.</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>
    1225. 

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

  1226. 

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

  1228. 

  1229. <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>
    1230. 

  1230.   <span class="token literal-property property">wheel</span><span class="token operator">:</span> <span class="token boolean">true</span>
    1231. 

  1231. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1232. 

  1232. 

  1233. 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>
    1234. 

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

  1235. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    1236. 

  1236. </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/en-US/plugins/wheel.md" target="_blank" rel="noopener noreferrer">Edit this page on 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">Last Updated:</span> <span class="time">2/1/2021, 11:07:17 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    1237. 

  1237.       ←
    1238. 

  1238.       <a href="/docs/en-US/plugins/slide.html" class="prev">
    1239. 

  1239.         slide
    1240. 

  1240.       </a></span> <span class="next"><a href="/docs/en-US/plugins/zoom.html">
    1241. 

  1241.         zoom
    1242. 

  1242.       </a>
    1243. 

  1243.       →
    1244. 

  1244.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    1245. 

  1245.     <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/96.6e382fd5.js" defer></script><script src="/docs/assets/js/56.cd04bae9.js" defer></script><script src="/docs/assets/js/7.518ccda7.js" defer></script>
    1246. 

  1246.   </body>
    1247. 

  1247. </html>
    1248.