better-scroll的基本使用

在做项目的时候，有使用到better-scroll来完成滚动，在这里记录一下对better-scroll的基本使用和一些使用心得。

安装

npm install better-scroll --save

引用

import BScroll from 'better-scroll'

使用

let scroll = new BScroll(DOM[,option1,...],...)

option有很多，可以在官方文档查看
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options-advanced.html#scrollbar

浏览器滚动原理

浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

那么对于 better-scroll 也是一样的道理，我们先来看一下 better-scroll 常见的 html 结构：（wrapper一定只能有一个子元素content，其他元素都要放进content里面）

  

    
...
    
...
    ...
  

为了更加直观，我们再来看一张图：（图中wrpper应该是wrapper）

image

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。

在Vue中封装一个独立组件，用于作为滚动组件：Scroll

Home.vue(一部分)

Scroll.vue

返回顶部

除了上面的基本滚动之外，我还加了一个小功能：返回顶部。

BackTop.vue

参考文章：http://www.imooc.com/article/18232