Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
wicresoft
/
doc_project
2
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Strom: 9cd9c7d1d5
Branche Tagy
doc_project
/
better-scroll-docs
/
en-US
/
plugins
/
slide.html

slide.html 170 KB
História Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763 
  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>slide | 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/95.4810ee5e.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/96.6e382fd5.js"><link rel="prefetch" href="/docs/assets/js/97.e270d7b5.js"><link rel="prefetch" href="/docs/assets/js/98.728ef6c2.js"><link rel="prefetch" href="/docs/assets/js/99.c75096e0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.2091e099.js">
    19. 

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

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/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/slide.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/slide.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/slide.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/slide.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" aria-current="page" class="active sidebar-link">slide</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#introduction" class="sidebar-link">Introduction</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#install" class="sidebar-link">Install</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#usage" class="sidebar-link">Usage</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#terms-about-slide" class="sidebar-link">Terms about slide</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#demo" class="sidebar-link">Demo</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#slide-options" class="sidebar-link">slide options</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#instance-methods" class="sidebar-link">Instance Methods</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/slide.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/en-US/plugins/wheel.html" class="sidebar-link">wheel</a></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="slide"><a href="#slide" class="header-anchor">#</a> slide</h1> <h2 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h2> <p>slide expands the ability of carousel for BetterScroll.</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/slide <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/slide
    55. 

  55. </code></pre></div><h2 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h2> <p>import <code>slide</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> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    57. 

  57. 

  58.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Slide<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">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">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    61. 

  61.     <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    62. 

  62.     <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    63. 

  63.       <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token number">100</span>
    64. 

  64.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    65. 

  65.     <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    66. 

  66.     <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    67. 

  67.     <span class="token literal-property property">stopPropagation</span><span class="token operator">:</span> <span class="token boolean">true</span>
    68. 

  68.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    69. 

  69. </code></pre></div><p>The following is related to <code>slide</code> plugin and <a href="/docs/en-US/guide/base-scroll-options.html">BetterScroll configuration</a>:</p> <ul><li><p><strong>slide(for plugin)</strong></p> <p>Enable zoom functionality. That is to say, the zoom plugin won't work without the zoom options, see <a href="/docs/en-US/plugins/slide.html#slide-options">slide options</a>.</p></li> <li><p><strong>scrollX</strong></p> <p>When the value is true, set the direction of slide to <strong>horizontal</strong>.</p></li> <li><p><strong>scrollY</strong></p> <p>When the value is true, set the direction of slide to <strong>vertical</strong>. <strong>Note: scrollX and scrollY cannot be set to true at the same time</strong></p></li> <li><p><strong>momentum</strong></p> <p>When using slide, this value needs to be set to false to avoid the problem of flickering during fast scrolling caused by inertial animation and the problem of scrolling multiple pages at a time during fast sliding.</p></li> <li><p><strong>bounce</strong></p> <p>The bounce value needs to be set to false, otherwise it will flicker when the loop is true.</p></li> <li><p><strong>probeType</strong></p> <p>If you want to register the <code>slideWillChange</code> event to get the change of the PageIndex of the slide in real time when the user drags the slide, you need to set the probeType value to 2 or 3.</p></li></ul> <h2 id="terms-about-slide"><a href="#terms-about-slide" class="header-anchor">#</a> Terms about slide</h2> <p>In general, the layout of BetterScroll's slide is as follows:</p> <div class="language-html extra-class"><pre class="language-html"><code><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>slide-wrapper<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>slide-content<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>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>slide-page<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>
    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>slide-page<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>
    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>slide-page<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>
    74. 

  74.     <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>slide-page<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>
    75. 

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

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

  77. </code></pre></div><ul><li><p><strong>slide-wrapper</strong></p> <p>slide container.</p></li> <li><p><strong>slide-content</strong></p> <p>slide scroll element.</p></li> <li><p><strong>slide-page</strong></p> <p>slide is composed of multiple Pages.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>In the loop scenario, two more pages will be inserted before and after the slide-content to achieve the visual effect of seamless scrolling.</p></div> <div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>The slide-content must have at least one slide-page, if there is only one page, the loop configuration is invalid</p></div></li></ul> <h2 id="demo"><a href="#demo" class="header-anchor">#</a> Demo</h2> <ul><li><p><strong>Horizontal Slide</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_pemd3klyi4" 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>
    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>slide-banner<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>banner-wrapper<span class="token punctuation">&quot;</span></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>slide-banner-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>slide<span class="token punctuation">&quot;</span></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>slide-banner-content<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">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>num in nums<span class="token punctuation">&quot;</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>slide-page<span class="token punctuation">&quot;</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><span class="token punctuation">'</span>page' + num<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>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>page {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    83. 

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

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

  85.       <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>dots-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    86. 

  86.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>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>dot<span class="token punctuation">&quot;</span></span>
    88. 

  88.           <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>num in nums<span class="token punctuation">&quot;</span></span>
    89. 

  89.           <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>num<span class="token punctuation">&quot;</span></span>
    90. 

  90.           <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>{'active': currentPageIndex === (num - 1)}<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>span</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 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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    94. 

  94.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>next<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>nextPage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>nextPage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    95. 

  95.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>prev<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>prePage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>prePage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    96. 

  96.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    101. 

  101. 

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

  103. 

  104.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    105. 

  105.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    106. 

  106.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    107. 

  107.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    108. 

  108.         <span class="token literal-property property">currentPageIndex</span><span class="token operator">:</span> <span class="token number">0</span>
    109. 

  109.       <span class="token punctuation">}</span>
    110. 

  110.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    111. 

  111.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    112. 

  112.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    113. 

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

  114.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    115. 

  115.       <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    116. 

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

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

  118.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    119. 

  119.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    120. 

  120.           <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    121. 

  121.           <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    122. 

  122.           <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    123. 

  123.           <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    124. 

  124.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    125. 

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

  126.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    127. 

  127.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<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 keyword">this</span><span class="token punctuation">.</span>_onScrollEnd<span class="token punctuation">)</span>
    128. 

  128. 

  129.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slideWillChange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    130. 

  130.           <span class="token keyword">this</span><span class="token punctuation">.</span>currentPageIndex <span class="token operator">=</span> page<span class="token punctuation">.</span>pageX
    131. 

  131.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    132. 

  132. 

  133.         <span class="token comment">// v2.1.0</span>
    134. 

  134.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slidePageChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    135. 

  135.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'CurrentPage changed to =&gt; '</span><span class="token punctuation">,</span> page<span class="token punctuation">)</span>
    136. 

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

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

  138.       <span class="token function">_onScrollEnd</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    139. 

  139.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'CurrentPage =&gt; '</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">getCurrentPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    140. 

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

  141.       <span class="token function">nextPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    142. 

  142.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    143. 

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

  144.       <span class="token function">prePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    145. 

  145.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    146. 

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

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

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

  149. </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 lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    150. 

  150. 

  151. <span class="token selector">.slide-banner</span>
    152. 

  152.   <span class="token selector">.banner-wrapper</span>
    153. 

  153.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    154. 

  154.   <span class="token selector">.slide-banner-wrapper</span>
    155. 

  155.     <span class="token property-declaration"><span class="token property">min-height</span> <span class="token number">1</span><span class="token unit">px</span></span>
    156. 

  156.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    157. 

  157.   <span class="token selector">.slide-banner-content</span>
    158. 

  158.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    159. 

  159.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    160. 

  160.     <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">0</span></span>
    161. 

  161.     <span class="token selector">.slide-page</span>
    162. 

  162.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    163. 

  163.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    164. 

  164.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
    165. 

  165.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    166. 

  166.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    167. 

  167.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">26</span><span class="token unit">px</span></span>
    168. 

  168.       <span class="token selector">&amp;.page1</span>
    169. 

  169.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#95B8D1</span></span>
    170. 

  170.       <span class="token selector">&amp;.page2</span>
    171. 

  171.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#DDA789</span></span>
    172. 

  172.       <span class="token selector">&amp;.page3</span>
    173. 

  173.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#C3D899</span></span>
    174. 

  174.       <span class="token selector">&amp;.page4</span>
    175. 

  175.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#F2D4A7</span></span>
    176. 

  176.   <span class="token selector">.dots-wrapper</span>
    177. 

  177.     <span class="token property-declaration"><span class="token property">position</span> absolute</span>
    178. 

  178.     <span class="token property-declaration"><span class="token property">bottom</span> <span class="token number">4</span><span class="token unit">px</span></span>
    179. 

  179.     <span class="token property-declaration"><span class="token property">left</span> <span class="token number">50</span><span class="token unit">%</span></span>
    180. 

  180.     <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">translateX</span><span class="token punctuation">(</span><span class="token number">-50</span><span class="token unit">%</span><span class="token punctuation">)</span></span></span>
    181. 

  181.     <span class="token selector">.dot</span>
    182. 

  182.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    183. 

  183.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">4</span><span class="token unit">px</span></span>
    184. 

  184.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">8</span><span class="token unit">px</span></span>
    185. 

  185.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">8</span><span class="token unit">px</span></span>
    186. 

  186.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">50</span><span class="token unit">%</span></span>
    187. 

  187.       <span class="token property-declaration"><span class="token property">background</span> <span class="token hexcode">#eee</span></span>
    188. 

  188.       <span class="token selector">&amp;.active</span>
    189. 

  189.         <span class="token property-declaration"><span class="token property">width</span> <span class="token number">20</span><span class="token unit">px</span></span>
    190. 

  190.         <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">5</span><span class="token unit">px</span></span>
    191. 

  191.   <span class="token selector">.btn-wrap</span>
    192. 

  192.     <span class="token property-declaration"><span class="token property">margin-top</span> <span class="token number">20</span><span class="token unit">px</span></span>
    193. 

  193.     <span class="token property-declaration"><span class="token property">display</span> flex</span>
    194. 

  194.     <span class="token property-declaration"><span class="token property">justify-content</span> center</span>
    195. 

  195.     <span class="token selector">button</span>
    196. 

  196.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">10</span><span class="token unit">px</span></span>
    197. 

  197.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">10</span><span class="token unit">px</span></span>
    198. 

  198.       <span class="token property-declaration"><span class="token property">color</span> <span class="token hexcode">#fff</span></span>
    199. 

  199.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">4</span><span class="token unit">px</span></span>
    200. 

  200.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#666</span></span>
    201. 

  201. 

  202. &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></li> <li><p><strong>Fullscreen Slide</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_9z2m5htg2f" 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>
    203. 

  203.   <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>slide-fullpage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    204. 

  204.     <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>banner-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    205. 

  205.       <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>slide-banner-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>slide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    206. 

  206.         <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>slide-banner-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    207. 

  207.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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>num in nums<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>num<span class="token punctuation">&quot;</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>slide-page<span class="token punctuation">&quot;</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><span class="token punctuation">'</span>page' + num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>page {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    208. 

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

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

  210.       <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>dots-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    211. 

  211.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span>
    212. 

  212.           <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>dot<span class="token punctuation">&quot;</span></span>
    213. 

  213.           <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>num in nums<span class="token punctuation">&quot;</span></span>
    214. 

  214.           <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>num<span class="token punctuation">&quot;</span></span>
    215. 

  215.           <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>{'active': currentPageIndex === (num - 1)}<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>span</span><span class="token punctuation">&gt;</span></span>
    216. 

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

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

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

  219. <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">
    220. 

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

  221.   <span class="token keyword">import</span> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    222. 

  222. 

  223.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Slide<span class="token punctuation">)</span>
    224. 

  224. 

  225.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    226. 

  226.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    227. 

  227.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    228. 

  228.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    229. 

  229.         <span class="token literal-property property">currentPageIndex</span><span class="token operator">:</span> <span class="token number">0</span>
    230. 

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

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

  232.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    233. 

  233.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    234. 

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

  235.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    236. 

  236.       <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    237. 

  237.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    238. 

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

  239.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    240. 

  240.         window<span class="token punctuation">.</span>slide <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    241. 

  241.           <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    242. 

  242.           <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    243. 

  243.           <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    244. 

  244.             <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    245. 

  245.             <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    246. 

  246.             <span class="token literal-property property">autoplay</span><span class="token operator">:</span> <span class="token boolean">false</span>
    247. 

  247.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    248. 

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

  249.           <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    250. 

  250.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    251. 

  251.           <span class="token literal-property property">stopPropagation</span><span class="token operator">:</span> <span class="token boolean">true</span>
    252. 

  252.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    253. 

  253.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<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 keyword">this</span><span class="token punctuation">.</span>_onScrollEnd<span class="token punctuation">)</span>
    254. 

  254.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    255. 

  255.       <span class="token function">nextPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    256. 

  256.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    257. 

  257.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    258. 

  258.       <span class="token function">prePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    259. 

  259.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    260. 

  260.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    261. 

  261.       <span class="token function">_onScrollEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    262. 

  262.         <span class="token keyword">let</span> pageIndex <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">getCurrentPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>pageX
    263. 

  263.         <span class="token keyword">this</span><span class="token punctuation">.</span>currentPageIndex <span class="token operator">=</span> pageIndex
    264. 

  264.       <span class="token punctuation">}</span>
    265. 

  265.     <span class="token punctuation">}</span>
    266. 

  266.   <span class="token punctuation">}</span>
    267. 

  267. </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 lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    268. 

  268. 

  269. <span class="token selector">.slide-fullpage</span>
    270. 

  270.   <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    271. 

  271.   <span class="token selector">&amp;.view</span>
    272. 

  272.     <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span></span>
    273. 

  273.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    274. 

  274.   <span class="token selector">.banner-wrapper</span>
    275. 

  275.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    276. 

  276.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    277. 

  277.   <span class="token selector">.slide-banner-wrapper</span>
    278. 

  278.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    279. 

  279.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    280. 

  280.   <span class="token selector">.slide-banner-content</span>
    281. 

  281.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    282. 

  282.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    283. 

  283.     <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">0</span></span>
    284. 

  284.     <span class="token selector">.slide-page</span>
    285. 

  285.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    286. 

  286.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    287. 

  287.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
    288. 

  288.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    289. 

  289.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    290. 

  290.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">26</span><span class="token unit">px</span></span>
    291. 

  291.       <span class="token property-declaration"><span class="token property">transform</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">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span></span></span>
    292. 

  292.       <span class="token property-declaration"><span class="token property">backface-visibility</span> hidden</span>
    293. 

  293.       <span class="token selector">&amp;.page1</span>
    294. 

  294.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#95B8D1</span></span>
    295. 

  295.       <span class="token selector">&amp;.page2</span>
    296. 

  296.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#DDA789</span></span>
    297. 

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

  298.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#C3D899</span></span>
    299. 

  299.       <span class="token selector">&amp;.page4</span>
    300. 

  300.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#F2D4A7</span></span>
    301. 

  301.   <span class="token selector">.dots-wrapper</span>
    302. 

  302.     <span class="token property-declaration"><span class="token property">position</span> absolute</span>
    303. 

  303.     <span class="token property-declaration"><span class="token property">bottom</span> <span class="token number">4</span><span class="token unit">px</span></span>
    304. 

  304.     <span class="token property-declaration"><span class="token property">left</span> <span class="token number">50</span><span class="token unit">%</span></span>
    305. 

  305.     <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">translateX</span><span class="token punctuation">(</span><span class="token number">-50</span><span class="token unit">%</span><span class="token punctuation">)</span></span></span>
    306. 

  306.     <span class="token selector">.dot</span>
    307. 

  307.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    308. 

  308.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">4</span><span class="token unit">px</span></span>
    309. 

  309.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">8</span><span class="token unit">px</span></span>
    310. 

  310.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">8</span><span class="token unit">px</span></span>
    311. 

  311.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">50</span><span class="token unit">%</span></span>
    312. 

  312.       <span class="token property-declaration"><span class="token property">background</span> <span class="token hexcode">#eee</span></span>
    313. 

  313.       <span class="token selector">&amp;.active</span>
    314. 

  314.         <span class="token property-declaration"><span class="token property">width</span> <span class="token number">20</span><span class="token unit">px</span></span>
    315. 

  315.         <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">5</span><span class="token unit">px</span></span>
    316. 

  316.   <span class="token selector">.btn-wrap</span>
    317. 

  317.     <span class="token property-declaration"><span class="token property">margin-top</span> <span class="token number">20</span><span class="token unit">px</span></span>
    318. 

  318.     <span class="token property-declaration"><span class="token property">display</span> flex</span>
    319. 

  319.     <span class="token property-declaration"><span class="token property">justify-content</span> center</span>
    320. 

  320.     <span class="token selector">button</span>
    321. 

  321.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">10</span><span class="token unit">px</span></span>
    322. 

  322.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">10</span><span class="token unit">px</span></span>
    323. 

  323.       <span class="token property-declaration"><span class="token property">color</span> <span class="token hexcode">#fff</span></span>
    324. 

  324.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">4</span><span class="token unit">px</span></span>
    325. 

  325.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#666</span></span>
    326. 

  326. 

  327. &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></li> <li><p><strong>Vertical Slide</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_gu9zh57ur3" 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>
    328. 

  328.   <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>slide-vertical<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    329. 

  329.     <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>vertical-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    330. 

  330.       <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>slide-vertical-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>slide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    331. 

  331.         <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>slide-vertical-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    332. 

  332.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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>num in nums<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>num<span class="token punctuation">&quot;</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>slide-page<span class="token punctuation">&quot;</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><span class="token punctuation">'</span>page' + num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>page {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    333. 

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

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

  335.       <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>dots-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    336. 

  336.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span>
    337. 

  337.           <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>dot<span class="token punctuation">&quot;</span></span>
    338. 

  338.           <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>num in nums<span class="token punctuation">&quot;</span></span>
    339. 

  339.           <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>num<span class="token punctuation">&quot;</span></span>
    340. 

  340.           <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>{'active': currentPageIndex === (num - 1)}<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>span</span><span class="token punctuation">&gt;</span></span>
    341. 

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

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

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

  344. <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">
    345. 

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

  346.   <span class="token keyword">import</span> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    347. 

  347. 

  348.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Slide<span class="token punctuation">)</span>
    349. 

  349. 

  350.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    351. 

  351.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    352. 

  352.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    353. 

  353.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    354. 

  354.         <span class="token literal-property property">currentPageIndex</span><span class="token operator">:</span> <span class="token number">0</span>
    355. 

  355.       <span class="token punctuation">}</span>
    356. 

  356.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    357. 

  357.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    358. 

  358.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    359. 

  359.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    360. 

  360.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    361. 

  361.       <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    362. 

  362.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    363. 

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

  364.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    365. 

  365.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    366. 

  366.           <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    367. 

  367.           <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    368. 

  368.           <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    369. 

  369.             <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token number">100</span>
    370. 

  370.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    371. 

  371.           <span class="token literal-property property">useTransition</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    372. 

  372.           <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    373. 

  373.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    374. 

  374.           <span class="token literal-property property">stopPropagation</span><span class="token operator">:</span> <span class="token boolean">true</span>
    375. 

  375.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    376. 

  376.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<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 keyword">this</span><span class="token punctuation">.</span>_onScrollEnd<span class="token punctuation">)</span>
    377. 

  377.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    378. 

  378.       <span class="token function">_onScrollEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    379. 

  379.         <span class="token keyword">let</span> pageIndex <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">getCurrentPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>pageY
    380. 

  380.         <span class="token keyword">this</span><span class="token punctuation">.</span>currentPageIndex <span class="token operator">=</span> pageIndex
    381. 

  381.       <span class="token punctuation">}</span>
    382. 

  382.     <span class="token punctuation">}</span>
    383. 

  383.   <span class="token punctuation">}</span>
    384. 

  384. </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 lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    385. 

  385. 

  386. <span class="token selector">.slide-vertical</span>
    387. 

  387.   <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    388. 

  388.   <span class="token selector">&amp;.view</span>
    389. 

  389.     <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span></span>
    390. 

  390.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    391. 

  391.   <span class="token selector">.vertical-wrapper</span>
    392. 

  392.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    393. 

  393.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    394. 

  394.     <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">0</span></span>
    395. 

  395.   <span class="token selector">.slide-vertical-wrapper</span>
    396. 

  396.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">%</span></span>
    397. 

  397.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    398. 

  398.     <span class="token selector">.slide-page</span>
    399. 

  399.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    400. 

  400.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
    401. 

  401.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    402. 

  402.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    403. 

  403.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">26</span><span class="token unit">px</span></span>
    404. 

  404.       <span class="token property-declaration"><span class="token property">transform</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">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span></span></span>
    405. 

  405.       <span class="token property-declaration"><span class="token property">backface-visibility</span> hidden</span>
    406. 

  406.       <span class="token selector">&amp;.page1</span>
    407. 

  407.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#D6EADF</span></span>
    408. 

  408.       <span class="token selector">&amp;.page2</span>
    409. 

  409.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#DDA789</span></span>
    410. 

  410.       <span class="token selector">&amp;.page3</span>
    411. 

  411.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#C3D899</span></span>
    412. 

  412.       <span class="token selector">&amp;.page4</span>
    413. 

  413.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#F2D4A7</span></span>
    414. 

  414.   <span class="token selector">.dots-wrapper</span>
    415. 

  415.     <span class="token property-declaration"><span class="token property">position</span> absolute</span>
    416. 

  416.     <span class="token property-declaration"><span class="token property">right</span> <span class="token number">4</span><span class="token unit">px</span></span>
    417. 

  417.     <span class="token property-declaration"><span class="token property">top</span> <span class="token number">50</span><span class="token unit">%</span></span>
    418. 

  418.     <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">translateY</span><span class="token punctuation">(</span><span class="token number">-50</span><span class="token unit">%</span><span class="token punctuation">)</span></span></span>
    419. 

  419.     <span class="token selector">.dot</span>
    420. 

  420.       <span class="token property-declaration"><span class="token property">display</span> block</span>
    421. 

  421.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">4</span><span class="token unit">px</span> <span class="token number">0</span></span>
    422. 

  422.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">8</span><span class="token unit">px</span></span>
    423. 

  423.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">8</span><span class="token unit">px</span></span>
    424. 

  424.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">50</span><span class="token unit">%</span></span>
    425. 

  425.       <span class="token property-declaration"><span class="token property">background</span> <span class="token hexcode">#eee</span></span>
    426. 

  426.       <span class="token selector">&amp;.active</span>
    427. 

  427.         <span class="token property-declaration"><span class="token property">height</span>  <span class="token number">20</span><span class="token unit">px</span></span>
    428. 

  428.         <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">5</span><span class="token unit">px</span></span>
    429. 

  429. 

  430. &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></li> <li><p><strong>Dynamic Slide <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></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_k7ugxn8b11" 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>
    431. 

  431.   <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>dynamic-slide-banner<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    432. 

  432.     <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>banner-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    433. 

  433.       <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>slide-banner-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>slide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    434. 

  434.         <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>slide-banner-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    435. 

  435.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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>num in nums<span class="token punctuation">&quot;</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>slide-page<span class="token punctuation">&quot;</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><span class="token punctuation">'</span>page' + num<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>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>page {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    436. 

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

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

  438.       <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>dots-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    439. 

  439.         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span>
    440. 

  440.           <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>dot<span class="token punctuation">&quot;</span></span>
    441. 

  441.           <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>num in nums<span class="token punctuation">&quot;</span></span>
    442. 

  442.           <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>num<span class="token punctuation">&quot;</span></span>
    443. 

  443.           <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>{'active': currentPageIndex === (num - 1)}<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>span</span><span class="token punctuation">&gt;</span></span>
    444. 

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

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

  446.     <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>btn-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    447. 

  447.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>increase<span class="token punctuation">&quot;</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>increase<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>increase<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    448. 

  448.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>decrease<span class="token punctuation">&quot;</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>decrease<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>decrease<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    449. 

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

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

  451. <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">
    452. 

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

  453.   <span class="token keyword">import</span> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    454. 

  454. 

  455.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Slide<span class="token punctuation">)</span>
    456. 

  456. 

  457.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    458. 

  458.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    459. 

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

  460.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    461. 

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

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

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

  464.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    465. 

  465.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    466. 

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

  467.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    468. 

  468.       <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    469. 

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

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

  471.       <span class="token function">increase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    472. 

  472.         <span class="token keyword">this</span><span class="token punctuation">.</span>nums <span class="token operator">+=</span> <span class="token number">1</span>
    473. 

  473.         <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>
    474. 

  474.           <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    475. 

  475.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    476. 

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

  477.       <span class="token function">decrease</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    478. 

  478.         <span class="token keyword">this</span><span class="token punctuation">.</span>nums <span class="token operator">-=</span> <span class="token number">1</span>
    479. 

  479.         <span class="token keyword">this</span><span class="token punctuation">.</span>nums <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>nums<span class="token punctuation">)</span> <span class="token comment">// at least one page</span>
    480. 

  480.         <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>
    481. 

  481.           <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    482. 

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

  483.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    484. 

  484.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    485. 

  485.         window<span class="token punctuation">.</span>slide <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    486. 

  486.           <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    487. 

  487.           <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    488. 

  488.           <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    489. 

  489.             <span class="token literal-property property">autoplay</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    490. 

  490.             <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span>
    491. 

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

  492.           <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    493. 

  493.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    494. 

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

  495.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    496. 

  496.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<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 keyword">this</span><span class="token punctuation">.</span>_onScrollEnd<span class="token punctuation">)</span>
    497. 

  497. 

  498.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slideWillChange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    499. 

  499.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'【slideWillChange】CurrentPage =&gt;'</span><span class="token punctuation">,</span> page<span class="token punctuation">)</span>
    500. 

  500.           <span class="token keyword">this</span><span class="token punctuation">.</span>currentPageIndex <span class="token operator">=</span> page<span class="token punctuation">.</span>pageX
    501. 

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

  502. 

  503.         <span class="token comment">// v2.1.0</span>
    504. 

  504.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slidePageChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    505. 

  505.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'【slidePageChanged】CurrentPage =&gt;'</span><span class="token punctuation">,</span> page<span class="token punctuation">)</span>
    506. 

  506.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    507. 

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

  508.       <span class="token function">_onScrollEnd</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    509. 

  509.         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'【scrollEnd】CurrentPage =&gt;'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">getCurrentPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    510. 

  510.       <span class="token punctuation">}</span>
    511. 

  511.     <span class="token punctuation">}</span>
    512. 

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

  513. </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><span class="token selector">&lt;style lang=&quot;stylus&quot; rel=&quot;stylesheet/stylus&quot;&gt;
    514. 

  514. .dynamic-slide-banner</span>
    515. 

  515.   <span class="token selector">.banner-wrapper</span>
    516. 

  516.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    517. 

  517.   <span class="token selector">.slide-banner-wrapper</span>
    518. 

  518.     <span class="token property-declaration"><span class="token property">min-height</span> <span class="token number">1</span><span class="token unit">px</span></span>
    519. 

  519.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    520. 

  520.   <span class="token selector">.slide-banner-content</span>
    521. 

  521.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    522. 

  522.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    523. 

  523.     <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">0</span></span>
    524. 

  524.     <span class="token selector">.slide-page</span>
    525. 

  525.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    526. 

  526.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    527. 

  527.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
    528. 

  528.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    529. 

  529.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    530. 

  530.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">26</span><span class="token unit">px</span></span>
    531. 

  531.       <span class="token selector">&amp;.page1</span>
    532. 

  532.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#95B8D1</span></span>
    533. 

  533.       <span class="token selector">&amp;.page2</span>
    534. 

  534.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#DDA789</span></span>
    535. 

  535.       <span class="token selector">&amp;.page3</span>
    536. 

  536.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#C3D899</span></span>
    537. 

  537.       <span class="token selector">&amp;.page4</span>
    538. 

  538.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#F2D4A7</span></span>
    539. 

  539.       <span class="token selector">&amp;.page5</span>
    540. 

  540.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#E71D36</span></span>
    541. 

  541.       <span class="token selector">&amp;.page6</span>
    542. 

  542.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#2EC4B6</span></span>
    543. 

  543.       <span class="token selector">&amp;.page7</span>
    544. 

  544.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#EFFFE9</span></span>
    545. 

  545.       <span class="token selector">&amp;.page8</span>
    546. 

  546.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#011627</span></span>
    547. 

  547.   <span class="token selector">.dots-wrapper</span>
    548. 

  548.     <span class="token property-declaration"><span class="token property">position</span> absolute</span>
    549. 

  549.     <span class="token property-declaration"><span class="token property">bottom</span> <span class="token number">4</span><span class="token unit">px</span></span>
    550. 

  550.     <span class="token property-declaration"><span class="token property">left</span> <span class="token number">50</span><span class="token unit">%</span></span>
    551. 

  551.     <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">translateX</span><span class="token punctuation">(</span><span class="token number">-50</span><span class="token unit">%</span><span class="token punctuation">)</span></span></span>
    552. 

  552.     <span class="token selector">.dot</span>
    553. 

  553.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    554. 

  554.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">4</span><span class="token unit">px</span></span>
    555. 

  555.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">8</span><span class="token unit">px</span></span>
    556. 

  556.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">8</span><span class="token unit">px</span></span>
    557. 

  557.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">50</span><span class="token unit">%</span></span>
    558. 

  558.       <span class="token property-declaration"><span class="token property">background</span> <span class="token hexcode">#eee</span></span>
    559. 

  559.       <span class="token selector">&amp;.active</span>
    560. 

  560.         <span class="token property-declaration"><span class="token property">width</span> <span class="token number">20</span><span class="token unit">px</span></span>
    561. 

  561.         <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">5</span><span class="token unit">px</span></span>
    562. 

  562.   <span class="token selector">.btn-wrap</span>
    563. 

  563.     <span class="token property-declaration"><span class="token property">margin-top</span> <span class="token number">20</span><span class="token unit">px</span></span>
    564. 

  564.     <span class="token property-declaration"><span class="token property">display</span> flex</span>
    565. 

  565.     <span class="token property-declaration"><span class="token property">justify-content</span> center</span>
    566. 

  566.     <span class="token selector">button</span>
    567. 

  567.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">10</span><span class="token unit">px</span></span>
    568. 

  568.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">10</span><span class="token unit">px</span></span>
    569. 

  569.       <span class="token property-declaration"><span class="token property">color</span> <span class="token hexcode">#fff</span></span>
    570. 

  570.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">4</span><span class="token unit">px</span></span>
    571. 

  571.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#666</span></span>
    572. 

  572. &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></li> <li><p><strong>Initial PageIndex Slide <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.3.0</span></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_b0zm3hbajs" 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>
    573. 

  573.   <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>slide-specified-index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    574. 

  574.     <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>banner-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    575. 

  575.       <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>slide-specified-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>slide<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    576. 

  576.         <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>slide-specified-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    577. 

  577.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</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>num in nums<span class="token punctuation">&quot;</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>slide-page<span class="token punctuation">&quot;</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><span class="token punctuation">'</span>page' + num<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>num<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>page {{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    578. 

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

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

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

  581.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>slideCreated<span class="token punctuation">&quot;</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>description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>currentPageIndex is {{slide.getCurrentPage().pageX}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    582. 

  582.     <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>btn-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    583. 

  583.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>next<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>nextPage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>nextPage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    584. 

  584.       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</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>prev<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>prePage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>prePage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    585. 

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

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

  587. <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">
    588. 

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

  589.   <span class="token keyword">import</span> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    590. 

  590. 

  591.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Slide<span class="token punctuation">)</span>
    592. 

  592. 

  593.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    594. 

  594.     <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    595. 

  595.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    596. 

  596.         <span class="token literal-property property">slideCreated</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    597. 

  597.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    598. 

  598.         <span class="token literal-property property">currentPageIndex</span><span class="token operator">:</span> <span class="token number">0</span>
    599. 

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

  600.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    601. 

  601.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    602. 

  602.       <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    603. 

  603.       <span class="token keyword">this</span><span class="token punctuation">.</span>slideCreated <span class="token operator">=</span> <span class="token boolean">true</span>
    604. 

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

  605.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    606. 

  606.       <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    607. 

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

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

  609.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    610. 

  610.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    611. 

  611.           <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    612. 

  612.           <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    613. 

  613.           <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    614. 

  614.             <span class="token literal-property property">autoplay</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    615. 

  615.             <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    616. 

  616.             <span class="token literal-property property">startPageXIndex</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token comment">// v2.3.0</span>
    617. 

  617.           <span class="token punctuation">}</span><span class="token punctuation">,</span>
    618. 

  618.           <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    619. 

  619.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    620. 

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

  621.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    622. 

  622.         <span class="token comment">// v2.1.0</span>
    623. 

  623.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slidePageChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    624. 

  624.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'CurrentPage changed to =&gt; '</span><span class="token punctuation">,</span> page<span class="token punctuation">)</span>
    625. 

  625.           <span class="token comment">// always get the currentPageIndex, because slide is not reactive</span>
    626. 

  626.           <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$forceUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    627. 

  627.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    628. 

  628.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    629. 

  629.       <span class="token function">nextPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    630. 

  630.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    631. 

  631.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    632. 

  632.       <span class="token function">prePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    633. 

  633.         <span class="token keyword">this</span><span class="token punctuation">.</span>slide<span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    634. 

  634.       <span class="token punctuation">}</span>
    635. 

  635.     <span class="token punctuation">}</span>
    636. 

  636.   <span class="token punctuation">}</span>
    637. 

  637. </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 lang=<span class="token string">&quot;stylus&quot;</span> rel=<span class="token string">&quot;stylesheet/stylus&quot;</span>&gt;
    638. 

  638. 

  639. <span class="token selector">.slide-specified-index</span>
    640. 

  640.   <span class="token selector">.banner-wrapper</span>
    641. 

  641.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    642. 

  642.   <span class="token selector">.slide-specified-wrapper</span>
    643. 

  643.     <span class="token property-declaration"><span class="token property">min-height</span> <span class="token number">1</span><span class="token unit">px</span></span>
    644. 

  644.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    645. 

  645.   <span class="token selector">.slide-specified-content</span>
    646. 

  646.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    647. 

  647.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    648. 

  648.     <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">0</span></span>
    649. 

  649.     <span class="token selector">.slide-page</span>
    650. 

  650.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    651. 

  651.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    652. 

  652.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">%</span></span>
    653. 

  653.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">200</span><span class="token unit">px</span></span>
    654. 

  654.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    655. 

  655.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">26</span><span class="token unit">px</span></span>
    656. 

  656.       <span class="token selector">&amp;.page1</span>
    657. 

  657.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#95B8D1</span></span>
    658. 

  658.       <span class="token selector">&amp;.page2</span>
    659. 

  659.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#DDA789</span></span>
    660. 

  660.       <span class="token selector">&amp;.page3</span>
    661. 

  661.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#C3D899</span></span>
    662. 

  662.       <span class="token selector">&amp;.page4</span>
    663. 

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

  664.   <span class="token selector">.description</span>
    665. 

  665.     <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    666. 

  666.   <span class="token selector">.btn-wrap</span>
    667. 

  667.     <span class="token property-declaration"><span class="token property">margin-top</span> <span class="token number">20</span><span class="token unit">px</span></span>
    668. 

  668.     <span class="token property-declaration"><span class="token property">display</span> flex</span>
    669. 

  669.     <span class="token property-declaration"><span class="token property">justify-content</span> center</span>
    670. 

  670.     <span class="token selector">button</span>
    671. 

  671.       <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> <span class="token number">10</span><span class="token unit">px</span></span>
    672. 

  672.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">10</span><span class="token unit">px</span></span>
    673. 

  673.       <span class="token property-declaration"><span class="token property">color</span> <span class="token hexcode">#fff</span></span>
    674. 

  674.       <span class="token property-declaration"><span class="token property">border-radius</span> <span class="token number">4</span><span class="token unit">px</span></span>
    675. 

  675.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#666</span></span>
    676. 

  676. 

  677. &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> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Note: When setting <code>useTransition = true</code>, there may be flickering on some iPhone systems. You need to add the following two additional styles to each <code>slide-page</code> like the code in the above demo:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span>
    678. 

  678. <span class="token property">backface-visibility</span><span class="token punctuation">:</span> hidden
    679. 

  679. </code></pre></div></div></li></ul> <h2 id="slide-options"><a href="#slide-options" class="header-anchor">#</a> slide options</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>When <code>slide</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>
    680. 

  680.   <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token boolean">true</span>
    681. 

  681. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    682. 

  682. 

  683. <span class="token comment">// equals</span>
    684. 

  684. 

  685. <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>
    686. 

  686.   <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    687. 

  687.     <span class="token literal-property property">loop</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    688. 

  688.     <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
    689. 

  689.     <span class="token literal-property property">speed</span><span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span>
    690. 

  690.     <span class="token literal-property property">easing</span><span class="token operator">:</span> ease<span class="token punctuation">.</span>bounce<span class="token punctuation">,</span>
    691. 

  691.     <span class="token literal-property property">listenFlick</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    692. 

  692.     <span class="token literal-property property">autoplay</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    693. 

  693.     <span class="token literal-property property">interval</span><span class="token operator">:</span> <span class="token number">3000</span>
    694. 

  694.   <span class="token punctuation">}</span>
    695. 

  695. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    696. 

  696. </code></pre></div></div> <h3 id="loop"><a href="#loop" class="header-anchor">#</a> loop</h3> <ul><li><strong>Type</strong>: <code>boolean</code></li> <li><strong>Default</strong>: <code>true</code></li></ul> <p>Is it possible to loop. But when there is only one element, this setting does not take effect.</p> <h3 id="autoplay"><a href="#autoplay" class="header-anchor">#</a> autoplay</h3> <ul><li><strong>Type</strong>: <code>boolean</code></li> <li><strong>Default</strong>: <code>true</code></li></ul> <p>Whether to enable auto play.</p> <h3 id="interval"><a href="#interval" class="header-anchor">#</a> interval</h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>3000</code></li></ul> <p>The interval before the next play.</p> <h3 id="speed"><a href="#speed" class="header-anchor">#</a> speed</h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>400</code></li></ul> <p>the default duration of Page animation.</p> <h3 id="easing"><a href="#easing" class="header-anchor">#</a> easing</h3> <ul><li><strong>Type</strong>: <code>EaseItem</code> <ul><li><code>{ string } style</code>: for <code>transition-timing-function</code></li> <li><code>{ Function } fn</code>: When setting <code>useTransition:false</code>, the animation curve is determined by <code>easing.fn</code>.</li></ul></li> <li><strong>Default</strong>:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
    697. 

  697.   <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'cubic-bezier(0.165, 0.84, 0.44, 1)'</span><span class="token punctuation">,</span>
    698. 

  698.   <span class="token function-variable function">fn</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">t</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    699. 

  699.     <span class="token keyword">return</span> <span class="token number">1</span> <span class="token operator">-</span> <span class="token operator">--</span>t <span class="token operator">*</span> t <span class="token operator">*</span> t <span class="token operator">*</span> t
    700. 

  700.   <span class="token punctuation">}</span>
    701. 

  701. <span class="token punctuation">}</span>
    702. 

  702. </code></pre></div><p>Scrolling easing effect.</p> <h3 id="listenflick"><a href="#listenflick" class="header-anchor">#</a> listenFlick</h3> <ul><li><strong>Type</strong>: <code>boolean</code></li> <li><strong>Default</strong>: <code>true</code></li></ul> <p>When quickly flicking across the slide area, it will trigger the switch to the previous/next page. Set listenFlick to false to turn off the effect.</p> <h3 id="threshold"><a href="#threshold" class="header-anchor">#</a> threshold</h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>0.1</code></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>When the scrolling distance is less than the threshold, the switch to the next or previous one will not be triggered.</p> <p>It can be set to a decimal, such as 0.1, or an integer, such as 100. When the value is a decimal, the threshold is treated as a percentage, and the final threshold is <code>slideWrapperWidth * threshold</code> or <code>slideWrapperHeight * threshold</code>. When the value is an integer, the threshold is threshold.</p></div> <p>The threshold of the next or previous Page.</p> <h3 id="startpagexindex"><a href="#startpagexindex" class="header-anchor">#</a> startPageXIndex <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.3.0</span></h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>0</code></li></ul> <p>Initial pageXIndex when slide is created.</p> <h3 id="startpageyindex"><a href="#startpageyindex" class="header-anchor">#</a> startPageYIndex <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.3.0</span></h3> <ul><li><strong>Type</strong>: <code>number</code></li> <li><strong>Default</strong>: <code>0</code></li></ul> <p>Initial pageYIndex when slide is created.</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>
    703. 

  703. <span class="token keyword">import</span> Slide <span class="token keyword">from</span> <span class="token string">'@better-scroll/slide'</span>
    704. 

  704. 

  705. BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Slide<span class="token punctuation">)</span>
    706. 

  706. 

  707. <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>
    708. 

  708.   <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token boolean">true</span>
    709. 

  709. <span class="token punctuation">}</span><span class="token punctuation">)</span>
    710. 

  710. 

  711. bs<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    712. 

  712. bs<span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    713. 

  713. bs<span class="token punctuation">.</span><span class="token function">getCurrentPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    714. 

  714. </code></pre></div></div> <h3 id="next-time-easing"><a href="#next-time-easing" class="header-anchor">#</a> next([time], [easing])</h3> <ul><li><strong>Arguments</strong>:
    715. 

  715. <ul><li><code>{ number } time&lt;Optional&gt;</code>: Animation duration, default is <code>options.speed</code></li> <li><code>{ EaseItem } easing&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>
    716. 

  716.   style<span class="token operator">:</span> <span class="token builtin">string</span>
    717. 

  717.   <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>
    718. 

  718. <span class="token punctuation">}</span>
    719. 

  719. </code></pre></div></li></ul> <p>Scroll to the next page.</p> <h3 id="prev-time-easing"><a href="#prev-time-easing" class="header-anchor">#</a> prev([time], [easing])</h3> <ul><li><strong>Arguments</strong>:
    720. 

  720. <ul><li><code>{ number } time&lt;Optional&gt;</code>: Animation duration, default is <code>options.speed</code></li> <li><code>{ EaseItem } easing&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></li></ul> <p>Scroll to the previous page.</p> <h3 id="gotopage-pagex-pagey-time-easing"><a href="#gotopage-pagex-pagey-time-easing" class="header-anchor">#</a> goToPage(pageX, pageY, [time], [easing])</h3> <ul><li><strong>Arguments</strong>:
    721. 

  721. <ul><li><code>{ number } pageX</code>: Scroll horizontally to the Page of the corresponding index, the subscript starts from 0</li> <li><code>{ number } pageY</code>: Scroll vertically to the Page of the corresponding index, the subscript starts from 0</li> <li><code>{ number } time&lt;Optional&gt;</code>: Animation duration, default is <code>options.speed</code></li> <li><code>{ EaseItem } easing&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></li></ul> <p>Scroll to the specified page.</p> <h3 id="getcurrentpage"><a href="#getcurrentpage" class="header-anchor">#</a> getCurrentPage()</h3> <ul><li><strong>Returns</strong>: <code>page</code></li></ul> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">type</span> <span class="token class-name">Page</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    722. 

  722.   x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
    723. 

  723.   y<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
    724. 

  724.   pageX<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> <span class="token comment">// pageIndex in horizontal direction</span>
    725. 

  725.   pageY<span class="token operator">:</span> <span class="token builtin">number</span>  <span class="token comment">// pageIndex in vertical direction</span>
    726. 

  726. <span class="token punctuation">}</span>
    727. 

  727. <span class="token keyword">const</span> page<span class="token operator">:</span>Page <span class="token operator">=</span> BScroll<span class="token punctuation">.</span><span class="token function">getCurrentPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    728. 

  728. </code></pre></div><p>Get currentPage.</p> <h3 id="startplay"><a href="#startplay" class="header-anchor">#</a> startPlay()</h3> <p>If the loop configuration is turned on, manually turn on autoplay.</p> <h3 id="pauseplay"><a href="#pauseplay" class="header-anchor">#</a> pausePlay()</h3> <p>If the loop configuration is turned on, manually turn off autoplay.</p> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <h3 id="slidewillchange"><a href="#slidewillchange" class="header-anchor">#</a> slideWillChange</h3> <ul><li><p><strong>Arguments</strong>: <code>page</code> object</p> <ul><li><code>{ number } x</code>: The x value of the page to be displayed</li> <li><code>{ number } y</code>: The y value of the page to be displayed</li> <li><code>{ number } pageX</code>: The index value of the horizontal page to be displayed, the subscript starts from 0</li> <li><code>{ number } pageY</code>: The index value of the vertical page to be displayed, the subscript starts from 0</li></ul></li> <li><p><strong>Trigger timing</strong>: When the currentPage value of slide is about to change</p></li> <li><p><strong>Usage</strong>:</p></li></ul> <p>In the banner, it is often accompanied by a dot legend to indicate which page the current banner is on, such as the &quot;Horizontal Slide&quot; example above. When the user drags the banner to the next one, we hope the dot legend below will change synchronously. As shown below</p> <img data-zoomable="" src="/docs/assets/images/slide-pageindex.png" alt="banner示例图" style="max-height:200px;"> <p>This effect can be achieved by register the <code>slideWillChange</code> event. code show as below:</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">let</span> currentPageIndex
    729. 

  729.   <span class="token keyword">const</span> slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    730. 

  730.     <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    731. 

  731.     <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    732. 

  732.     <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    733. 

  733.       <span class="token literal-property property">threshold</span><span class="token operator">:</span> <span class="token number">100</span>
    734. 

  734.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    735. 

  735.     <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    736. 

  736.     <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    737. 

  737.     <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">2</span>
    738. 

  738.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    739. 

  739.   slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slideWillChange'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    740. 

  740.     currentPageIndex <span class="token operator">=</span> page<span class="token punctuation">.</span>pageX
    741. 

  741.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    742. 

  742. </code></pre></div><h3 id="slidepagechanged"><a href="#slidepagechanged" class="header-anchor">#</a> slidePageChanged <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.1.0</span></h3> <ul><li><p><strong>Arguments</strong>: <code>page</code> object</p> <ul><li><code>{ number } x</code>: The x value of the current page</li> <li><code>{ number } y</code>: The y value of the current page</li> <li><code>{ number } pageX</code>: The index value of the horizontal page, the subscript starts from 0</li> <li><code>{ number } pageY</code>: The index value of the vertical page, the subscript starts from 0</li></ul></li> <li><p><strong>Trigger timing</strong>: When slide page has changed</p></li></ul> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">const</span> slide <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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>slide<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    743. 

  743.     <span class="token literal-property property">scrollX</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    744. 

  744.     <span class="token literal-property property">scrollY</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    745. 

  745.     <span class="token literal-property property">slide</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    746. 

  746.     <span class="token literal-property property">momentum</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    747. 

  747.     <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token boolean">false</span>
    748. 

  748.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    749. 

  749.   slide<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'slidePageChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    750. 

  750.     currentPageIndex <span class="token operator">=</span> page<span class="token punctuation">.</span>pageX
    751. 

  751.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    752. 

  752. </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/slide.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">4/19/2021, 5:22:09 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    753. 

  753.       ←
    754. 

  754.       <a href="/docs/en-US/plugins/indicators.html" class="prev">
    755. 

  755.         indicators
    756. 

  756.       </a></span> <span class="next"><a href="/docs/en-US/plugins/wheel.html">
    757. 

  757.         wheel
    758. 

  758.       </a>
    759. 

  759.       →
    760. 

  760.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    761. 

  761.     <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/95.4810ee5e.js" defer></script><script src="/docs/assets/js/56.cd04bae9.js" defer></script><script src="/docs/assets/js/7.518ccda7.js" defer></script>
    762. 

  762.   </body>
    763. 

  763. </html>
    764.