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

base-scroll.html 135 KB
Lịch sử Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574 
  1. <!DOCTYPE html>
    2. 

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

  3.   <head>
    4. 

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

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

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

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

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/zh-CN/" class="home-link router-link-active"><img src="https://dpubstatic.udache.com/static/dpubimg/t_L6vAgQ-E/logo.svg" alt="BetterScroll 2.0" class="logo"> <span class="site-name can-hide">BetterScroll 2.0</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/zh-CN/guide/" class="nav-link router-link-active">
    23. 

  23.   指南
    24. 

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

  25.   插件
    26. 

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

  27.   常见问题
    28. 

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

  29.   讨论
    30. 

  30.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs/en-US/guide/base-scroll.html" class="nav-link">
    31. 

  31.   English
    32. 

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

  33.   简体中文
    34. 

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

  35.     GitHub
    36. 

  36.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/zh-CN/guide/" class="nav-link router-link-active">
    37. 

  37.   指南
    38. 

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

  39.   插件
    40. 

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

  41.   常见问题
    42. 

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

  43.   讨论
    44. 

  44.   <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/docs/en-US/guide/base-scroll.html" class="nav-link">
    45. 

  45.   English
    46. 

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

  47.   简体中文
    48. 

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

  49.     GitHub
    50. 

  50.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/zh-CN/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/docs/zh-CN/guide/how-to-install.html" class="sidebar-link">安装</a></li><li><a href="/docs/zh-CN/guide/use.html" class="sidebar-link">使用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>核心滚动</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/zh-CN/guide/base-scroll.html" aria-current="page" class="active sidebar-link">核心滚动</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/zh-CN/guide/base-scroll.html#上手" class="sidebar-link">上手</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/guide/base-scroll.html#动态-content" class="sidebar-link">动态 content</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/guide/base-scroll.html#specifiedindexascontent" class="sidebar-link">specifiedIndexAsContent</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/guide/base-scroll.html#quadrant" class="sidebar-link">quadrant</a></li><li class="sidebar-sub-header"><a href="/docs/zh-CN/guide/base-scroll.html#温馨提示" class="sidebar-link">温馨提示</a></li></ul></li><li><a href="/docs/zh-CN/guide/base-scroll-options.html" class="sidebar-link">配置项</a></li><li><a href="/docs/zh-CN/guide/base-scroll-api.html" class="sidebar-link">API</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="核心滚动"><a href="#核心滚动" class="header-anchor">#</a> 核心滚动</h1> <p>在 BetterScroll 2.0 的设计当中，我们抽象了核心滚动部分，它作为 BetterScroll 的最小使用单元，压缩体积比 <code>1.0</code> 小了将近三分之一，往往你可能只需要完成一个纯粹的滚动需求，那么你只需要引入这一个库，方式如下：</p> <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/core <span class="token parameter variable">--save</span>
    51. 

  51. </code></pre></div><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>
    52. 

  52. <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">'.div'</span><span class="token punctuation">)</span>
    53. 

  53. </code></pre></div><h2 id="上手"><a href="#上手" class="header-anchor">#</a> 上手</h2> <p>BetterScroll 有多种滚动模式。</p> <ul><li><p><strong>垂直滚动</strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#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_k8lfzyrt0d" 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>
    54. 

  54.   <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>core-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    55. 

  55.     <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>scroll-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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    56. 

  56.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    57. 

  57.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in emojis<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clickHandler(item)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    58. 

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

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

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

  61. <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">
    62. 

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

  63. 

  64.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    65. 

  65.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    66. 

  66.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    67. 

  67.         <span class="token literal-property property">emojis</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    68. 

  68.           <span class="token string">'😀 😁 😂 🤣 😃'</span><span class="token punctuation">,</span>
    69. 

  69.           <span class="token string">'😄 😅 😆 😉 😊'</span><span class="token punctuation">,</span>
    70. 

  70.           <span class="token string">'😫 😴 😌 😛 😜'</span><span class="token punctuation">,</span>
    71. 

  71.           <span class="token string">'👆🏻 😒 😓 😔 👇🏻'</span><span class="token punctuation">,</span>
    72. 

  72.           <span class="token string">'😑 😶 🙄 😏 😣'</span><span class="token punctuation">,</span>
    73. 

  73.           <span class="token string">'😞 😟 😤 😢 😭'</span><span class="token punctuation">,</span>
    74. 

  74.           <span class="token string">'🤑 😲 🙄 🙁 😖'</span><span class="token punctuation">,</span>
    75. 

  75.           <span class="token string">'👍 👎 👊 ✊ 🤛'</span><span class="token punctuation">,</span>
    76. 

  76.           <span class="token string">'🙄 ✋ 🤚 🖐 🖖'</span><span class="token punctuation">,</span>
    77. 

  77.           <span class="token string">'👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼'</span><span class="token punctuation">,</span>
    78. 

  78.           <span class="token string">'☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽'</span><span class="token punctuation">,</span>
    79. 

  79.           <span class="token string">'🌖 🌗 🌘 🌑 🌒'</span><span class="token punctuation">,</span>
    80. 

  80.           <span class="token string">'💫 💥 💢 💦 💧'</span><span class="token punctuation">,</span>
    81. 

  81.           <span class="token string">'🐠 🐟 🐬 🐳 🐋'</span><span class="token punctuation">,</span>
    82. 

  82.           <span class="token string">'😬 😐 😕 😯 😶'</span><span class="token punctuation">,</span>
    83. 

  83.           <span class="token string">'😇 😏 😑 😓 😵'</span><span class="token punctuation">,</span>
    84. 

  84.           <span class="token string">'🐥 🐣 🐔 🐛 🐤'</span><span class="token punctuation">,</span>
    85. 

  85.           <span class="token string">'💪 ✨ 🔔 ✊ ✋'</span><span class="token punctuation">,</span>
    86. 

  86.           <span class="token string">'👇 👊 👍 👈 👆'</span><span class="token punctuation">,</span>
    87. 

  87.           <span class="token string">'💛 👐 👎 👌 💘'</span><span class="token punctuation">,</span>
    88. 

  88.           <span class="token string">'👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼'</span><span class="token punctuation">,</span>
    89. 

  89.           <span class="token string">'☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽'</span><span class="token punctuation">,</span>
    90. 

  90.           <span class="token string">'🌖 🌗 🌘 🌑 🌒'</span><span class="token punctuation">,</span>
    91. 

  91.           <span class="token string">'💫 💥 💢 💦 💧'</span><span class="token punctuation">,</span>
    92. 

  92.           <span class="token string">'🐠 🐟 🐬 🐳 🐋'</span><span class="token punctuation">,</span>
    93. 

  93.           <span class="token string">'😬 😐 😕 😯 😶'</span><span class="token punctuation">,</span>
    94. 

  94.           <span class="token string">'😇 😏 😑 😓 😵'</span><span class="token punctuation">,</span>
    95. 

  95.           <span class="token string">'🐥 🐣 🐔 🐛 🐤'</span><span class="token punctuation">,</span>
    96. 

  96.           <span class="token string">'💪 ✨ 🔔 ✊ ✋'</span><span class="token punctuation">,</span>
    97. 

  97.           <span class="token string">'👇 👊 👍 👈 👆'</span><span class="token punctuation">,</span>
    98. 

  98.           <span class="token string">'💛 👐 👎 👌 💘'</span>
    99. 

  99.         <span class="token punctuation">]</span>
    100. 

  100.       <span class="token punctuation">}</span>
    101. 

  101.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    102. 

  102.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    103. 

  103.       <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>
    104. 

  104.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    105. 

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

  106.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    107. 

  107.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    108. 

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

  109.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    110. 

  110.         <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    111. 

  111.           <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    112. 

  112.           <span class="token literal-property property">click</span><span class="token operator">:</span> <span class="token boolean">true</span>
    113. 

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

  114.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollStart'</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>
    115. 

  115.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollStart-'</span><span class="token punctuation">)</span>
    116. 

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

  117.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> y <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    118. 

  118.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    119. 

  119.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    120. 

  120.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollEnd'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">pos</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    121. 

  121.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>pos<span class="token punctuation">)</span>
    122. 

  122.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    123. 

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

  124.       <span class="token function">clickHandler</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    125. 

  125.         window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
    126. 

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

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

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

  129. </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> scoped&gt;
    130. 

  130. 

  131. <span class="token selector">.core-container</span>
    132. 

  132.   <span class="token selector">.scroll-wrapper</span>
    133. 

  133.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">400</span><span class="token unit">px</span></span>
    134. 

  134.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    135. 

  135.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    136. 

  136.     <span class="token selector">.scroll-item</span>
    137. 

  137.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    138. 

  138.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    139. 

  139.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    140. 

  140.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    141. 

  141.       <span class="token property-declaration"><span class="token property">border-bottom</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eee</span></span>
    142. 

  142.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    143. 

  143.       <span class="token selector">&amp;:nth-child(2n)</span>
    144. 

  144.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    145. 

  145.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    146. 

  146.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    147. 

  147. &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 warning"><p class="custom-block-title">WARNING</p> <p>BetterScroll 实时派发 scroll 事件，是需要设置 <code>probeType</code> 为 3。</p></div></li> <li><p><strong>水平滚动</strong></p> <div class="demo-wrap"><div class="demo-nav"><i class="demo-nav-btn icon-code"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg></i> <div class="v-popover"><div class="trigger" style="display:inline-block;"><i class="demo-nav-btn icon-qrcode"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#666"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg></i> </div> <div id="popover_eei63nya3d" 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>
    148. 

  148.   <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>horizontal-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    149. 

  149.     <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>scroll-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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    150. 

  150.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    151. 

  151.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(item, index) in emojis<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    152. 

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

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

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

  155. <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">
    156. 

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

  157. 

  158.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    159. 

  159.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    160. 

  160.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    161. 

  161.         <span class="token literal-property property">emojis</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    162. 

  162.           <span class="token string">'👉🏼 😁 😂 🤣 👈🏼'</span><span class="token punctuation">,</span>
    163. 

  163.           <span class="token string">'😄 😅 😆 😉 😊'</span><span class="token punctuation">,</span>
    164. 

  164.           <span class="token string">'😫 😴 😌 😛 😜'</span><span class="token punctuation">,</span>
    165. 

  165.           <span class="token string">'👆🏻 😒 😓 😔 👇🏻'</span><span class="token punctuation">,</span>
    166. 

  166.           <span class="token string">'😑 😶 🙄 😏 😣'</span><span class="token punctuation">,</span>
    167. 

  167.           <span class="token string">'😞 😟 😤 😢 😭'</span><span class="token punctuation">,</span>
    168. 

  168.           <span class="token string">'🤑 😲 ☹️ 🙁 😖'</span><span class="token punctuation">,</span>
    169. 

  169.           <span class="token string">'👍 👎 👊 ✊ 🤛'</span><span class="token punctuation">,</span>
    170. 

  170.           <span class="token string">'☝️ ✋ 🤚 🖐 🖖'</span><span class="token punctuation">,</span>
    171. 

  171.           <span class="token string">'👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼'</span><span class="token punctuation">,</span>
    172. 

  172.           <span class="token string">'☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽'</span><span class="token punctuation">,</span>
    173. 

  173.           <span class="token string">'🌖 🌗 🌘 🌑 🌒'</span>
    174. 

  174.         <span class="token punctuation">]</span>
    175. 

  175.       <span class="token punctuation">}</span>
    176. 

  176.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    177. 

  177.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    178. 

  178.       <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>
    179. 

  179.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    180. 

  180.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    181. 

  181.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    182. 

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

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

  184.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    185. 

  185.         <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    186. 

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

  187.           <span class="token literal-property property">probeType</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token comment">// listening scroll event</span>
    188. 

  188.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    189. 

  189.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scrollStart'</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>
    190. 

  190.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollStart-'</span><span class="token punctuation">)</span>
    191. 

  191.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    192. 

  192.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> y <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    193. 

  193.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    194. 

  194.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    195. 

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

  196.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollingEnd'</span><span class="token punctuation">)</span>
    197. 

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

  198.       <span class="token punctuation">}</span>
    199. 

  199.     <span class="token punctuation">}</span>
    200. 

  200.   <span class="token punctuation">}</span>
    201. 

  201. </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> scoped&gt;
    202. 

  202. 

  203. <span class="token selector">.horizontal-container</span>
    204. 

  204.   <span class="token selector">.scroll-wrapper</span>
    205. 

  205.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    206. 

  206.     <span class="token property-declaration"><span class="token property">width</span> <span class="token number">90</span><span class="token unit">%</span></span>
    207. 

  207.     <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">80</span><span class="token unit">px</span> auto</span>
    208. 

  208.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    209. 

  209.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">3</span><span class="token unit">px</span> solid <span class="token hexcode">#42b983</span></span>
    210. 

  210.     <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>
    211. 

  211.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    212. 

  212.     <span class="token selector">.scroll-content</span>
    213. 

  213.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    214. 

  214.     <span class="token selector">.scroll-item</span>
    215. 

  215.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    216. 

  216.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    217. 

  217.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    218. 

  218.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    219. 

  219.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    220. 

  220.       <span class="token property-declaration"><span class="token property">padding</span> <span class="token number">0</span> <span class="token number">10</span><span class="token unit">px</span></span>
    221. 

  221. &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 warning"><p class="custom-block-title">WARNING</p> <p>BetterScroll 实现横向滚动，对 CSS 是比较苛刻的。首先你要保证 wrapper 不换行，并且 content 的 display 是 inline-block。</p> <div class="language-stylus extra-class"><pre class="language-stylus"><code><span class="token selector">.scroll-wrapper</span>
    222. 

  222.   <span class="token comment">// ...</span>
    223. 

  223.   <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    224. 

  224. <span class="token selector">.scroll-content</span>
    225. 

  225.   <span class="token comment">// ...</span>
    226. 

  226.   <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    227. 

  227. </code></pre></div></div></li> <li><p><strong>freeScroll（水平与垂直同时滚动）</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_5ii8dyprvv" 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>
    228. 

  228.   <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>free-scroll-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    229. 

  229.     <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>free-scroll-wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    230. 

  230.       <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>scroll-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>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    231. 

  231.         <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    232. 

  232.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    233. 

  233.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    234. 

  234.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    235. 

  235.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    236. 

  236.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    237. 

  237.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    238. 

  238.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    239. 

  239.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    240. 

  240.           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    241. 

  241.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    242. 

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

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

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

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

  246. <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 punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    247. 

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

  248.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    249. 

  249.     <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    250. 

  250.       <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>
    251. 

  251.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    252. 

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

  253.       <span class="token function">init</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    254. 

  254.         <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>wrapper<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    255. 

  255.           <span class="token literal-property property">freeScroll</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    256. 

  256.           <span class="token literal-property property">bounce</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    257. 

  257.             <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    258. 

  258.             <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    259. 

  259.             <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    260. 

  260.             <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token boolean">false</span>
    261. 

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

  262.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    263. 

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

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

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

  266. </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; scoped&gt;
    267. 

  267. .free-scroll-container</span>
    268. 

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

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

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

  271.   <span class="token selector">.free-scroll-wrapper</span>
    272. 

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

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

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

  275.     <span class="token property-declaration"><span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token func"><span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">96</span><span class="token punctuation">,</span> <span class="token number">108</span><span class="token punctuation">,</span> <span class="token number">113</span><span class="token punctuation">)</span></span></span>
    276. 

  276.     <span class="token property-declaration"><span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box</span>
    277. 

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

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

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

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

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

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

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

  284.       <span class="token selector">.scroll-content</span>
    285. 

  285.         <span class="token property-declaration"><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#efeff4</span></span>
    286. 

  286.         <span class="token property-declaration"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">1500</span><span class="token unit">px</span></span>
    287. 

  287.         <span class="token property-declaration"><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">1000</span><span class="token unit">px</span></span>
    288. 

  288.         <span class="token selector">p</span>
    289. 

  289.           <span class="token property-declaration"><span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">16</span><span class="token unit">px</span></span>
    290. 

  290.           <span class="token property-declaration"><span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span></span>
    291. 

  291.           <span class="token property-declaration"><span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">%</span></span>
    292. 

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

  293. &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></ul> <h2 id="动态-content"><a href="#动态-content" class="header-anchor">#</a> 动态 content <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.0.4</span></h2> <p>对于 <code>2.0.4</code> 版本，已经具备了探测 content 元素变成其他元素的能力，可以查看下面的例子。</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_drm6owrxtd" 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>
    294. 

  294.   <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>core-dynamic-content-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    295. 

  295.     <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>scroll-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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    296. 

  296.       <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>scroll-content c1<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>1<span class="token punctuation">&quot;</span></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>!switcher<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    297. 

  297.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>n in nums1<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>n<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{n}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    298. 

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

  299.       <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>scroll-content c2<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>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>
    300. 

  300.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>n in nums2<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>n<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{nums2 - n + 1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    301. 

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

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

  303.     <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>btn<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>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>switch content element<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
    304. 

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

  305. <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">
    306. 

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

  307. 

  308.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    309. 

  309.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    310. 

  310.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    311. 

  311.         <span class="token literal-property property">nums1</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
    312. 

  312.         <span class="token literal-property property">nums2</span><span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
    313. 

  313.         <span class="token literal-property property">switcher</span><span class="token operator">:</span> <span class="token boolean">false</span>
    314. 

  314.       <span class="token punctuation">}</span>
    315. 

  315.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    316. 

  316.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    317. 

  317.       <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>
    318. 

  318.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    319. 

  319.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    320. 

  320.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    321. 

  321.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    322. 

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

  323.       <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    324. 

  324.         <span class="token keyword">this</span><span class="token punctuation">.</span>switcher <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>switcher
    325. 

  325.         <span class="token comment">// wait for Vue rerender</span>
    326. 

  326.         <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>
    327. 

  327.           <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    328. 

  328.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    329. 

  329.       <span class="token punctuation">}</span><span class="token punctuation">,</span>
    330. 

  330.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    331. 

  331.         <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    332. 

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

  333.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    334. 

  334.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'contentChanged'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">content</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    335. 

  335.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'--- newContent ---'</span><span class="token punctuation">)</span>
    336. 

  336.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span>
    337. 

  337.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    338. 

  338.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</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>
    339. 

  339.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    340. 

  340.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    341. 

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

  342.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollingEnd'</span><span class="token punctuation">)</span>
    343. 

  343.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    344. 

  344.       <span class="token punctuation">}</span>
    345. 

  345.     <span class="token punctuation">}</span>
    346. 

  346.   <span class="token punctuation">}</span>
    347. 

  347. </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> scoped&gt;
    348. 

  348. 

  349. <span class="token selector">.core-dynamic-content-container</span>
    350. 

  350.   <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    351. 

  351.   <span class="token selector">.scroll-wrapper</span>
    352. 

  352.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">300</span><span class="token unit">px</span></span>
    353. 

  353.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    354. 

  354.     <span class="token selector">.scroll-item</span>
    355. 

  355.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    356. 

  356.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    357. 

  357.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    358. 

  358.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    359. 

  359.       <span class="token property-declaration"><span class="token property">border-bottom</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eee</span></span>
    360. 

  360.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    361. 

  361.       <span class="token selector">&amp;:nth-child(2n)</span>
    362. 

  362.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    363. 

  363.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    364. 

  364.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    365. 

  365. 	<span class="token selector">.btn</span>
    366. 

  366. 		<span class="token property-declaration"><span class="token property">margin</span> <span class="token number">40</span><span class="token unit">px</span> auto</span>
    367. 

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

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

  369. 		<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>
    370. 

  370. 		<span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">20</span><span class="token unit">px</span></span>
    371. 

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

  372. &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> <h2 id="specifiedindexascontent"><a href="#specifiedindexascontent" class="header-anchor">#</a> specifiedIndexAsContent <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.0.4</span></h2> <p>对于 <code>2.0.4</code> 版本，可以指定 <strong>wrapper</strong> 的某一个 children 作为 <strong>content</strong>，在之前的版本，BetterScroll只会处理 wrapper 的第一个子元素。<a href="/docs/zh-CN/guide/base-scroll-options.html#specifiedindexascontent-2-0-4">详细的文档在这</a>。</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_ee3oxmzv8c" 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>
    373. 

  373.   <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>core-specified-content-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    374. 

  374.     <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>scroll-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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    375. 

  375.       <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>ignore-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    376. 

  376.         The Blue area is not taken as BetterScroll's content
    377. 

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

  378.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    379. 

  379.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>n 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>n<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{n}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    380. 

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

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

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

  383. <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">
    384. 

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

  385. 

  386.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    387. 

  387.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    388. 

  388.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    389. 

  389.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">30</span>
    390. 

  390.       <span class="token punctuation">}</span>
    391. 

  391.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    392. 

  392.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    393. 

  393.       <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>
    394. 

  394.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    395. 

  395.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    396. 

  396.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    397. 

  397.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    398. 

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

  399.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    400. 

  400.         window<span class="token punctuation">.</span>bs <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    401. 

  401.           <span class="token literal-property property">specifiedIndexAsContent</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    402. 

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

  403.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    404. 

  404.         <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</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>
    405. 

  405.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrolling-'</span><span class="token punctuation">)</span>
    406. 

  406.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    407. 

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

  408.           console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'scrollingEnd'</span><span class="token punctuation">)</span>
    409. 

  409.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    410. 

  410.       <span class="token punctuation">}</span>
    411. 

  411.     <span class="token punctuation">}</span>
    412. 

  412.   <span class="token punctuation">}</span>
    413. 

  413. </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> scoped&gt;
    414. 

  414. 

  415. <span class="token selector">.core-specified-content-container</span>
    416. 

  416.   <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    417. 

  417.   <span class="token selector">.scroll-wrapper</span>
    418. 

  418.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">400</span><span class="token unit">px</span></span>
    419. 

  419.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    420. 

  420.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#42b983</span></span>
    421. 

  421.     <span class="token selector">.ignore-content</span>
    422. 

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

  423.       <span class="token property-declaration"><span class="token property">color</span> <span class="token color">white</span></span>
    424. 

  424.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">20</span><span class="token unit">px</span></span>
    425. 

  425.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    426. 

  426.       <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#2c3e50</span></span>
    427. 

  427.     <span class="token selector">.scroll-item</span>
    428. 

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

  429.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">50</span><span class="token unit">px</span></span>
    430. 

  430.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    431. 

  431.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    432. 

  432.       <span class="token property-declaration"><span class="token property">border-bottom</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#eee</span></span>
    433. 

  433.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    434. 

  434.       <span class="token selector">&amp;:nth-child(2n)</span>
    435. 

  435.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    436. 

  436.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    437. 

  437.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    438. 

  438. &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> <h2 id="quadrant"><a href="#quadrant" class="header-anchor">#</a> quadrant <span class="badge tip" style="vertical-align:top;" data-v-15b7b770>2.3.0</span></h2> <p>对于 <code>2.3.0</code> 版本，如果 BetterScroll 的 wrapper DOM 的父元素或者祖先元素发生旋转，可以通过 <code>quadrant</code> 选项来修正用户的交互行为。</p> <ul><li><strong>竖向滚动强制变换成横向滚动</strong></li></ul> <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_9eton95iea" 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>
    439. 

  439.   <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-rotated-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    440. 

  440.     <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>description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Horizontal layout via CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    441. 

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

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

  443.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>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 punctuation">&gt;</span></span>{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</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 punctuation">&gt;</span></span>
    447. 

  447. <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">
    448. 

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

  449. 

  450.   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    451. 

  451.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    452. 

  452.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    453. 

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

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

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

  456.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    457. 

  457.       <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>
    458. 

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

  459.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    460. 

  460.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    461. 

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

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

  463.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    464. 

  464.         <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    465. 

  465.           <span class="token comment">// v2.3.0</span>
    466. 

  466.           <span class="token literal-property property">quadrant</span><span class="token operator">:</span> <span class="token number">2</span> <span class="token comment">// rotate90</span>
    467. 

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

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

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

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

  471. </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> scoped&gt;
    472. 

  472. 

  473. <span class="token selector"><span class="token comment">/* horizontal by CSS */</span>
    474. 

  474. .scroll-wrapper</span>
    475. 

  475.   <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">90</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    476. 

  476. <span class="token selector">.vertical-rotated-container</span>
    477. 

  477.   <span class="token selector">.description</span>
    478. 

  478.     <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    479. 

  479.   <span class="token selector">.scroll-wrapper</span>
    480. 

  480.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">250</span><span class="token unit">px</span></span>
    481. 

  481.     <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">px</span></span>
    482. 

  482.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    483. 

  483.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    484. 

  484.     <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> auto</span>
    485. 

  485.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ccc</span></span>
    486. 

  486.     <span class="token selector">.scroll-item</span>
    487. 

  487.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    488. 

  488.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">px</span></span>
    489. 

  489.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    490. 

  490.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    491. 

  491.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    492. 

  492.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    493. 

  493.       <span class="token selector">&amp;:nth-child(2n)</span>
    494. 

  494.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    495. 

  495.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    496. 

  496.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    497. 

  497. &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> <ul><li><strong>横向滚动强制翻转</strong></li></ul> <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_tq24ceci68" 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>
    498. 

  498.   <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>horizontal-rotated-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    499. 

  499.     <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>description<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Flipping layout via CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    500. 

  500.     <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>scroll-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>scroll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    501. 

  501.       <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>scroll-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    502. 

  502.         <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>scroll-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>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 punctuation">&gt;</span></span>{{num}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    503. 

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

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

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

  506. <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">
    507. 

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

  508. 

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

  510.     <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    511. 

  511.       <span class="token keyword">return</span> <span class="token punctuation">{</span>
    512. 

  512.         <span class="token literal-property property">nums</span><span class="token operator">:</span> <span class="token number">8</span>
    513. 

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

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

  515.     <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    516. 

  516.       <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>
    517. 

  517.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    518. 

  518.     <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    519. 

  519.       <span class="token keyword">this</span><span class="token punctuation">.</span>bs<span class="token punctuation">.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    520. 

  520.     <span class="token punctuation">}</span><span class="token punctuation">,</span>
    521. 

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

  522.       <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    523. 

  523.         <span class="token keyword">this</span><span class="token punctuation">.</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 keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>scroll<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    524. 

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

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

  526.           <span class="token comment">// v2.3.0</span>
    527. 

  527.           <span class="token literal-property property">quadrant</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token comment">// rotate180</span>
    528. 

  528.         <span class="token punctuation">}</span><span class="token punctuation">)</span>
    529. 

  529.       <span class="token punctuation">}</span>
    530. 

  530.     <span class="token punctuation">}</span>
    531. 

  531.   <span class="token punctuation">}</span>
    532. 

  532. </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> scoped&gt;
    533. 

  533. 

  534. <span class="token selector"><span class="token comment">/* flipping by CSS */</span>
    535. 

  535. .scroll-wrapper</span>
    536. 

  536.   <span class="token property-declaration"><span class="token property">transform</span> <span class="token func"><span class="token function">rotate</span><span class="token punctuation">(</span><span class="token number">180</span><span class="token unit">deg</span><span class="token punctuation">)</span></span></span>
    537. 

  537. <span class="token selector">.horizontal-rotated-container</span>
    538. 

  538.   <span class="token selector">.description</span>
    539. 

  539.     <span class="token property-declaration"><span class="token property">margin-bottom</span> <span class="token number">40</span><span class="token unit">px</span></span>
    540. 

  540.     <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    541. 

  541.   <span class="token selector">.scroll-wrapper</span>
    542. 

  542.     <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    543. 

  543.     <span class="token property-declaration"><span class="token property">width</span> <span class="token number">250</span><span class="token unit">px</span></span>
    544. 

  544.     <span class="token property-declaration"><span class="token property">position</span> relative</span>
    545. 

  545.     <span class="token property-declaration"><span class="token property">overflow</span> hidden</span>
    546. 

  546.     <span class="token property-declaration"><span class="token property">white-space</span> nowrap</span>
    547. 

  547.     <span class="token property-declaration"><span class="token property">margin</span> <span class="token number">0</span> auto</span>
    548. 

  548.     <span class="token property-declaration"><span class="token property">border</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode">#ccc</span></span>
    549. 

  549.     <span class="token selector">.scroll-content</span>
    550. 

  550.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    551. 

  551.     <span class="token selector">.scroll-item</span>
    552. 

  552.       <span class="token property-declaration"><span class="token property">height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    553. 

  553.       <span class="token property-declaration"><span class="token property">width</span> <span class="token number">100</span><span class="token unit">px</span></span>
    554. 

  554.       <span class="token property-declaration"><span class="token property">line-height</span> <span class="token number">100</span><span class="token unit">px</span></span>
    555. 

  555.       <span class="token property-declaration"><span class="token property">font-size</span> <span class="token number">24</span><span class="token unit">px</span></span>
    556. 

  556.       <span class="token property-declaration"><span class="token property">font-weight</span> bold</span>
    557. 

  557.       <span class="token property-declaration"><span class="token property">text-align</span> center</span>
    558. 

  558.       <span class="token property-declaration"><span class="token property">display</span> inline-block</span>
    559. 

  559.       <span class="token selector">&amp;:nth-child(2n)</span>
    560. 

  560.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#f3f5f7</span></span>
    561. 

  561.       <span class="token selector">&amp;:nth-child(2n+1)</span>
    562. 

  562.         <span class="token property-declaration"><span class="token property">background-color</span> <span class="token hexcode">#42b983</span></span>
    563. 

  563. &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> <h2 id="温馨提示"><a href="#温馨提示" class="header-anchor">#</a> 温馨提示</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><strong>任何时候如果出现无法滚动的情况，都应该首先查看 content 元素高度/宽度是否大于 wrapper 的高度/宽度</strong>。这是内容能够滚动的前提条件。</p> <p>如果内容存在图片的情况，可能会出现 DOM 元素渲染时图片还未下载，因此内容元素的高度小于预期，出现滚动不正常的情况。此时你应该在图片加载完成后，比如 onload 事件回调中，调用 <code>bs.refresh</code> 方法，它会重新计算最新的滚动距离。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/ustbhuangyi/better-scroll/edit/dev/packages/vuepress-docs/docs/zh-CN/guide/base-scroll.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2021/4/19 20:15:26</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
    564. 

  564.       ←
    565. 

  565.       <a href="/docs/zh-CN/guide/use.html" class="prev">
    566. 

  566.         使用
    567. 

  567.       </a></span> <span class="next"><a href="/docs/zh-CN/guide/base-scroll-options.html">
    568. 

  568.         配置项
    569. 

  569.       </a>
    570. 

  570.       →
    571. 

  571.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    572. 

  572.     <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/104.7be4589d.js" defer></script><script src="/docs/assets/js/56.cd04bae9.js" defer></script><script src="/docs/assets/js/7.518ccda7.js" defer></script>
    573. 

  573.   </body>
    574. 

  574. </html>
    575.