使用VitePress搭建的文档网站

Appearance

Better-Scroll 在非 Vue项目中的使用 ​

首先需要引入better-scroll

<script src="scroll.js"></script>

最基本的需要使用一个 wrapper 包裹 content 来构建一个基本结构，例如

  <div class="wrapper">
    <ul class="content">
      <li>
        1
      </li>
      ......
    </ul>
  </div>

除此之外，还需要定义一些基本的css，最重要的是要设置wrapper的高度要小于content的高度，这样才会有滑动的效果，例如下面的样式就是设置了wrapper的高度，但是没有设置content的高度，content的高度会根据li的数量以及高度来自动决定

  .wrapper {
    height: 420px;
    background: orange;
    width: 300px;
    overflow: hidden;
  }
  
  ul {
    display: flex;
    flex-direction: column;
  }

  li {

    display: block;
    text-align: center;
    border-bottom: 1px solid #333;
    line-height: 60px;
  }

最后进行最简单的初始化代码:

let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

使用的一些注意项目 ​

  1. better-scroll 会阻止默认的点击事件，所以需要在配置插件的时候，增加一个click: true

  2. 可以在一个页面中使用两个better-scroll 插件，需要在页面中进行初始化时，分别对两个不同的容器进行初始化，如果是切换状态的两个容器，当页面加载时，第二个容器由于没有显示，可能会不能立即生成高度，所以better-scroll不会立即生效。

  3. 上拉加载时，需要在结尾增加 refresh()事件，用于刷新better-scroll插件中的内容，重新计算。例如

  let wrapper1 = document.querySelector('.wrapper')
  let scroll1 = new BScroll(wrapper1, {
    pullUpLoad: {
      threshold: -30,
      stop: 20
    },
    click: true,
  })
  scroll1.scrollTo(0, 0, 100)

  scroll1.on('pullingUp', function () {
    console.log('1')
    scroll1.finishPullUp()
  })

  scroll1.refresh()
  1. 其他的方法或者功能请查阅官方文档