Halaman utama Jelajahi Bantuan
Daftar Masuk
wicresoft
/
doc_project
2
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Pohon: 9cd9c7d1d5
Ranting Tag
doc_project
/
better-scroll-docs
/
en-US
/
plugins
/
index.html

index.html 30 KB
Riwayat Mentahan

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en-US">
    3. 

  3.   <head>
    4. 

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

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

  6.     <title>plugins | 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/83.3393dfc3.js" as="script"><link rel="prefetch" href="/docs/assets/js/1.8644db92.js"><link rel="prefetch" href="/docs/assets/js/10.6f8c38eb.js"><link rel="prefetch" href="/docs/assets/js/100.ee08226e.js"><link rel="prefetch" href="/docs/assets/js/101.fd2f3d9f.js"><link rel="prefetch" href="/docs/assets/js/102.79d86e3d.js"><link rel="prefetch" href="/docs/assets/js/103.7a3ae3b5.js"><link rel="prefetch" href="/docs/assets/js/104.7be4589d.js"><link rel="prefetch" href="/docs/assets/js/105.75386d15.js"><link rel="prefetch" href="/docs/assets/js/106.a4a18e8d.js"><link rel="prefetch" href="/docs/assets/js/107.561ec2e2.js"><link rel="prefetch" href="/docs/assets/js/108.1c61689f.js"><link rel="prefetch" href="/docs/assets/js/109.da71a73e.js"><link rel="prefetch" href="/docs/assets/js/110.5e0fa2d1.js"><link rel="prefetch" href="/docs/assets/js/111.1e326dd1.js"><link rel="prefetch" href="/docs/assets/js/112.590ba317.js"><link rel="prefetch" href="/docs/assets/js/113.cf201ace.js"><link rel="prefetch" href="/docs/assets/js/114.6d895ce2.js"><link rel="prefetch" href="/docs/assets/js/115.572aee19.js"><link rel="prefetch" href="/docs/assets/js/116.754722a0.js"><link rel="prefetch" href="/docs/assets/js/117.15e4dab3.js"><link rel="prefetch" href="/docs/assets/js/118.721d68f8.js"><link rel="prefetch" href="/docs/assets/js/119.c5c28d96.js"><link rel="prefetch" href="/docs/assets/js/120.12cd2e0e.js"><link rel="prefetch" href="/docs/assets/js/121.e41f8100.js"><link rel="prefetch" href="/docs/assets/js/122.9ebe2f53.js"><link rel="prefetch" href="/docs/assets/js/123.f90c91f9.js"><link rel="prefetch" href="/docs/assets/js/13.b0c40cd7.js"><link rel="prefetch" href="/docs/assets/js/14.28bec126.js"><link rel="prefetch" href="/docs/assets/js/15.87b22af4.js"><link rel="prefetch" href="/docs/assets/js/16.c10e14e7.js"><link rel="prefetch" href="/docs/assets/js/17.5c921c77.js"><link rel="prefetch" href="/docs/assets/js/18.dc23b7e3.js"><link rel="prefetch" href="/docs/assets/js/19.a4034f95.js"><link rel="prefetch" href="/docs/assets/js/2.03f0f2c8.js"><link rel="prefetch" href="/docs/assets/js/20.8633fd45.js"><link rel="prefetch" href="/docs/assets/js/21.1fbf8d7e.js"><link rel="prefetch" href="/docs/assets/js/22.2888cfc5.js"><link rel="prefetch" href="/docs/assets/js/23.f951d302.js"><link rel="prefetch" href="/docs/assets/js/24.12842718.js"><link rel="prefetch" href="/docs/assets/js/25.5a5a3137.js"><link rel="prefetch" href="/docs/assets/js/26.88e81f0b.js"><link rel="prefetch" href="/docs/assets/js/27.152b8fda.js"><link rel="prefetch" href="/docs/assets/js/28.22550ea8.js"><link rel="prefetch" href="/docs/assets/js/29.f43fa807.js"><link rel="prefetch" href="/docs/assets/js/30.4ed38f67.js"><link rel="prefetch" href="/docs/assets/js/31.af4018f6.js"><link rel="prefetch" href="/docs/assets/js/32.930ee0b7.js"><link rel="prefetch" href="/docs/assets/js/33.c6a68c75.js"><link rel="prefetch" href="/docs/assets/js/34.6d10da1e.js"><link rel="prefetch" href="/docs/assets/js/35.11ba7b51.js"><link rel="prefetch" href="/docs/assets/js/36.8a54712b.js"><link rel="prefetch" href="/docs/assets/js/37.b26eb85d.js"><link rel="prefetch" href="/docs/assets/js/38.d6569a11.js"><link rel="prefetch" href="/docs/assets/js/39.1d22cfba.js"><link rel="prefetch" href="/docs/assets/js/40.577a94d7.js"><link rel="prefetch" href="/docs/assets/js/41.155e01e0.js"><link rel="prefetch" href="/docs/assets/js/42.3c26eaba.js"><link rel="prefetch" href="/docs/assets/js/43.d90991e2.js"><link rel="prefetch" href="/docs/assets/js/44.5437344c.js"><link rel="prefetch" href="/docs/assets/js/45.0d2eca0a.js"><link rel="prefetch" href="/docs/assets/js/46.11455b40.js"><link rel="prefetch" href="/docs/assets/js/47.1ee1a8f0.js"><link rel="prefetch" href="/docs/assets/js/48.c82450ab.js"><link rel="prefetch" href="/docs/assets/js/49.8016ee5f.js"><link rel="prefetch" href="/docs/assets/js/50.ab73e091.js"><link rel="prefetch" href="/docs/assets/js/51.bce6eb99.js"><link rel="prefetch" href="/docs/assets/js/52.c9b1992f.js"><link rel="prefetch" href="/docs/assets/js/53.7057f0f5.js"><link rel="prefetch" href="/docs/assets/js/54.cbb0a6b5.js"><link rel="prefetch" href="/docs/assets/js/55.89176a68.js"><link rel="prefetch" href="/docs/assets/js/56.cd04bae9.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/7.518ccda7.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/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/en-US/" class="home-link router-link-active"><img src="https://dpubstatic.udache.com/static/dpubimg/t_L6vAgQ-E/logo.svg" alt="BetterScroll 2.0" class="logo"> <span class="site-name can-hide">BetterScroll 2.0</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/en-US/guide/" class="nav-link">
    23. 

  23.   Guide
    24. 

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

  25.   Plugin
    26. 

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

  27.   FAQ
    28. 

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

  29.   Discuss
    30. 

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

  31.   English
    32. 

  32. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/" class="nav-link">
    33. 

  33.   简体中文
    34. 

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

  35.     GitHub
    36. 

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

  37.   Guide
    38. 

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

  39.   Plugin
    40. 

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

  41.   FAQ
    42. 

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

  43.   Discuss
    44. 

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

  45.   English
    46. 

  46. </a></li><li class="dropdown-item"><!----> <a href="/docs/zh-CN/plugins/" class="nav-link">
    47. 

  47.   简体中文
    48. 

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

  49.     GitHub
    50. 

  50.     <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Plugins Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/plugins/" aria-current="page" class="active sidebar-link">plugins</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/#why-need-plugins" class="sidebar-link">Why need plugins</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/#use-a-plugin" class="sidebar-link">Use a plugin</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/#use-a-method-or-property-of-plugins" class="sidebar-link">Use a method or property of plugins</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/#use-a-event-of-plugins" class="sidebar-link">Use a event of plugins</a></li><li class="sidebar-sub-header"><a href="/docs/en-US/plugins/#betterscroll-with-all-plugins" class="sidebar-link">BetterScroll with all plugins</a></li></ul></li><li><a href="/docs/en-US/plugins/how-to-write.html" class="sidebar-link">How to write plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Plugins</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/en-US/plugins/mouse-wheel.html" class="sidebar-link">mouse-wheel</a></li><li><a href="/docs/en-US/plugins/observe-dom.html" class="sidebar-link">observe-dom</a></li><li><a href="/docs/en-US/plugins/observe-image.html" class="sidebar-link">observe-image</a></li><li><a href="/docs/en-US/plugins/pulldown.html" class="sidebar-link">pulldown</a></li><li><a href="/docs/en-US/plugins/pullup.html" class="sidebar-link">pullup</a></li><li><a href="/docs/en-US/plugins/scroll-bar.html" class="sidebar-link">scrollbar</a></li><li><a href="/docs/en-US/plugins/indicators.html" class="sidebar-link">indicators</a></li><li><a href="/docs/en-US/plugins/slide.html" class="sidebar-link">slide</a></li><li><a href="/docs/en-US/plugins/wheel.html" class="sidebar-link">wheel</a></li><li><a href="/docs/en-US/plugins/zoom.html" class="sidebar-link">zoom</a></li><li><a href="/docs/en-US/plugins/nested-scroll.html" class="sidebar-link">nested-scroll</a></li><li><a href="/docs/en-US/plugins/infinity.html" class="sidebar-link">infinity</a></li><li><a href="/docs/en-US/plugins/movable.html" class="sidebar-link">movable</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="plugins"><a href="#plugins" class="header-anchor">#</a> plugins</h1> <h2 id="why-need-plugins"><a href="#why-need-plugins" class="header-anchor">#</a> Why need plugins</h2> <p>In order to decouple the functions of the various features of BetterScroll 1.x, to prevent unlimited increase in the size of the bundle. In the <code>2.x</code> architecture design, a &quot;plugin&quot; architecture design is adopted. Each feature of 1.x will be implemented in the form of Plugin in <code>2.x</code>.</p> <p>Existing plugins:</p> <ul><li><a href="/docs/en-US/plugins/pulldown.html">pulldown</a></li> <li><a href="/docs/en-US/plugins/pullup.html">pullup</a></li> <li><a href="/docs/en-US/plugins/scroll-bar.html">scrollbar</a></li> <li><a href="/docs/en-US/plugins/slide.html">slide</a></li> <li><a href="/docs/en-US/plugins/wheel.html">wheel</a></li> <li><a href="/docs/en-US/plugins/zoom.html">zoom</a></li> <li><a href="/docs/en-US/plugins/mouse-wheel.html">mouse-wheel</a></li> <li><a href="/docs/en-US/plugins/observe-dom.html">observe-dom</a></li> <li><a href="/docs/en-US/plugins/observe-image.html">observe-image</a></li> <li><a href="/docs/en-US/plugins/nested-scroll.html">nested-scroll</a></li> <li><a href="/docs/en-US/plugins/infinity.html">infinity</a></li> <li><a href="/docs/en-US/plugins/movable.html">movable</a></li> <li><a href="/docs/en-US/plugins/indicators.html">indicators</a></li></ul> <p>You can write a plugin by yourself to add new feature to <code>bs</code>. If you want do this, please refer to <a href="/docs/en-US/plugins/how-to-write.html">How to write a plugin</a>.</p> <h2 id="use-a-plugin"><a href="#use-a-plugin" class="header-anchor">#</a> Use a plugin</h2> <p>Use plugins by calling the <code>BScroll.use()</code> static method. This has to be done before you call <code>new BScroll()</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    51. 

  51.   <span class="token keyword">import</span> Plugin <span class="token keyword">from</span> <span class="token string">'somewhere'</span>
    52. 

  52. 

  53.   <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    54. 

  54.     <span class="token comment">// pluginKey corresponds to the value of the static attribute pluginName on the Plugin class,</span>
    55. 

  55.     <span class="token comment">// otherwise the plugin cannot be instantiated</span>
    56. 

  56.     <span class="token literal-property property">pluginKey</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    57. 

  57.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    58. 

  58. </code></pre></div><h2 id="use-a-method-or-property-of-plugins"><a href="#use-a-method-or-property-of-plugins" class="header-anchor">#</a> Use a method or property of plugins</h2> <p>The plugin may expose some methods or properties. These methods or properties are proxied to <code>bs</code> via <code>Object.defineProperty</code> method. For example, the <code>zoomTo</code> method is provided in the zoom plugin, which you can use by <code>bs.zoomTo</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    59. 

  59.   <span class="token keyword">import</span> Zoom <span class="token keyword">from</span> <span class="token string">'@better-scroll/zoom'</span>
    60. 

  60. 

  61.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Zoom<span class="token punctuation">)</span>
    62. 

  62. 

  63.   <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">'#scroll-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    64. 

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

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

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

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

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

  69.     <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    70. 

  70.       <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    71. 

  71.       <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
    72. 

  72.       <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">2</span>
    73. 

  73.     <span class="token punctuation">}</span>
    74. 

  74.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    75. 

  75. 

  76.   bs<span class="token punctuation">.</span><span class="token function">zoomTo</span><span class="token punctuation">(</span><span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token comment">// zoomTo from Zoom Plugin is proxied to bs instance</span>
    77. 

  77. </code></pre></div><h2 id="use-a-event-of-plugins"><a href="#use-a-event-of-plugins" class="header-anchor">#</a> Use a event of plugins</h2> <p>The hooks exposed in the plugin will be delegated to <code>bs</code>. For example, you can listen to the <code>zoomStart</code> event, which is exposed in zoom plugin, in the following way:</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/core'</span>
    78. 

  78.   <span class="token keyword">import</span> Zoom <span class="token keyword">from</span> <span class="token string">'@better-scroll/zoom'</span>
    79. 

  79. 

  80.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Zoom<span class="token punctuation">)</span>
    81. 

  81.   <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">'#scroll-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    82. 

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

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

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

  85.     <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    86. 

  86.       <span class="token literal-property property">start</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    87. 

  87.       <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
    88. 

  88.       <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">2</span>
    89. 

  89.     <span class="token punctuation">}</span>
    90. 

  90.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    91. 

  91. 

  92.   bs<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'zoomStart'</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>
    93. 

  93. 

  94.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    95. 

  95. </code></pre></div><h2 id="betterscroll-with-all-plugins"><a href="#betterscroll-with-all-plugins" class="header-anchor">#</a> BetterScroll with all plugins</h2> <p>Considering the trouble of registering plugins one by one, if your project uses the full plugins of BetterScroll, we offer a once-in-a-lifetime solution.</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'better-scroll'</span>
    96. 

  96. 

  97.   <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">'#scroll-wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    98. 

  98.     <span class="token literal-property property">pullUpLoad</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    99. 

  99.     <span class="token literal-property property">pullDownRefresh</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    100. 

  100.     <span class="token literal-property property">scrollbar</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    101. 

  101.     <span class="token comment">// and so on</span>
    102. 

  102.   <span class="token punctuation">}</span><span class="token punctuation">)</span>
    103. 

  103. </code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>import all of BetterScroll may have a big impact on the size of your bundle, and as the function of BetterScroll expands, the size will increase unlimitedly, <strong>try to import what you need</strong>.</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Normally, you should pay attention to the properties and methods exposed by the BetterScroll instance, because the properties and methods on the plugin instance have been proxied to the bs. If you really need to care about the plugin instance, you can also use <code>bs.plugins</code> to get all plugin information.</p> <div class="language-js extra-class"><pre class="language-js"><code>  <span class="token keyword">import</span> BScroll <span class="token keyword">from</span> <span class="token string">'@better-scroll/scroll'</span>
    104. 

  104.   <span class="token keyword">import</span> zoom <span class="token keyword">from</span> <span class="token string">'@better-scroll/zoom'</span>
    105. 

  105. 

  106.   BScroll<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>zoom<span class="token punctuation">)</span>
    107. 

  107. 

  108.   <span class="token keyword">const</span> bs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token string">'.wrapper'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    109. 

  109.     <span class="token literal-property property">zoom</span><span class="token operator">:</span> <span class="token boolean">true</span>
    110. 

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

  111. 

  112.   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bs<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span>zoom<span class="token punctuation">)</span>
    113. 

  113. </code></pre></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/ustbhuangyi/better-scroll/edit/dev/packages/vuepress-docs/docs/en-US/plugins/README.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/27/2021, 11:10:57 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/docs/en-US/plugins/how-to-write.html">
    114. 

  114.         How to write plugins
    115. 

  115.       </a>
    116. 

  116.       →
    117. 

  117.     </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    118. 

  118.     <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/83.3393dfc3.js" defer></script>
    119. 

  119.   </body>
    120. 

  120. </html>
    121.