【前端Vue插件】01 - Better-Scroll插件的基本 安装 与 使用

介绍

  1. BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些feature以及做了一些性能优化。

  2. BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。


在Vue中安装

  1. 使用 npm在项目中安装:
npm install better-scroll --save
better-scroll实现移动端流畅滚动

在Vue项目中简单使用

  1. 使用 VueCLI3以上的脚手架创建一个Vue项目:
vue create better-scroll-demo
  1. 在项目中安装better-scroll :
npm install better-scroll
  1. 编写页面结构:这里的页面结构是由一定要求的,.wrapper类包裹的元素只能是一个标签。这里的.wrapper类名是自定义的,注意后面跟随一致。
 <div class="wrapper">
    <div class="hello">
      <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
          ....这里省略若干行
      </ul>
    </div>
  </div>
  1. 编写页面样式:
.wrapper {
    height: 300px;
    background-color: skyblue;
  }
  1. mounted生命周期函数中创建 Better-scroll对象并绑定需要实现滚动的页面元素。
new BS('.wrapper', {})

推荐阅读更多精彩内容