better-scroll使用

better-scroll 是什么

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

better-scroll 官网：http://ustbhuangyi.github.io/better-scroll/#/examples/zh

安装

NPM

yarn add better-scroll

import BScroll from ‘better-scroll’

script

使用 better-scroll 实现移动端整屏滚动

HTML

1
<div class="wrapper">
2
    <ul class="content">
3
        <li>第一屏</li>
4
        <li>第二屏</li>
5
        <li>第三屏</li>
6
        <li>第四屏</li>
7
        <li>第五屏</li>
8
    </ul>
9
</div>

css

1
body {
2
         margin: 0;
3
     }
4
     .wrapper {
5
         height: 100vh;
6
         overflow: hidden;
7
     }
8
     .content {
9
         margin: 0;
10
         padding: 0;
11
     }
12
     .content li {
13
         display: flex;
14
         justify-content: center;
15
         align-items: center;
16
         height: 100vh;
17
         list-style: none;
18
         font-size: 50px;
19
         font-weight: bold;
20
         color: #fff;
21
     }
22
     .content li:nth-child(1) {
23
         background: #f00;
24
     }
25
     .content li:nth-child(2) {
26
         background: #0f0;
27
     }
28
     .content li:nth-child(3) {
29
         background: #00f;
30
     }
31
     .content li:nth-child(4) {
32
         background: #ff89de;
33
     }
34
     .content li:nth-child(5) {
35
         background: #ff7a27;
36
     }

JavaScript

1
var bscroll = new BScroll(".wrapper", {
2
  click: true,  // 元素可触发点击事件
3
  scrollY: true,  // 纵向可滑动，默认为true
4
  snap: {  // 滑块切换的一些配置
5
     threshold: 0.5,  // 滑动切换到超过一半时切换到下一屏
6
     stepY: window.innerHeight  // 纵向切换距离为窗口高度
7
   }
8
});

下拉刷新 和 上拉加载

一定要让content高度大于wrapper高度，否则无滚动效果

css 

1
ul, li {
2
    list-style: none;
3
    margin: 0;
4
    padding: 0;
5
}
6
7
body {
8
    margin: 0;
9
}
10
11
.wrapper {
12
    display: flex;
13
    flex-direction: column;
14
    align-items: center;
15
    width: 100%;
16
    height: calc(100vh - 40px);
17
    text-align: center;
18
    line-height: 40px;
19
    overflow: hidden;
20
}
21
22
.header {
23
    width: 100%;
24
    height: 40px;
25
    color: white;
26
    background: #333;
27
}
28
29
.content {
30
    flex: 1;
31
    box-sizing: border-box;
32
    width: 100%;
33
}
34
35
.content li {
36
    width: 100%;
37
    height: 80px;
38
    margin-bottom: 12px;
39
    background: aquamarine;
40
}

html 

1
<div class="wrapper">
2
    <ul class="content">
3
        <li>分类列表</li>
4
        <li>分类列表</li>
5
        <li>分类列表</li>
6
        <li>分类列表</li>
7
        <li>分类列表</li>
8
        <li>分类列表</li>
9
        <li>分类列表</li>
10
        <li>分类列表</li>
11
        <li>分类列表</li>
12
        <li>分类列表</li>
13
        <li>分类列表</li>
14
        <li>分类列表</li>
15
        <li>分类列表</li>
16
        <li>分类列表</li>
17
        <li>分类列表</li>
18
        <li>分类列表</li>
19
        <li>分类列表</li>
20
        <li>分类列表</li>
21
        <li>分类列表</li>
22
    </ul>
23
</div>

javascript

1
var scroll = new BScroll(".wrapper", {
2
  probeType: 3,
3
  scrollY: true,
4
  click: true,
5
  pullDownRefresh: {
6
    threshold: 50,         //顶部下拉的距离 来决定刷新时机以及回弹停留的距离 当下拉刷新数据加载完毕后，需要执行 finishPullDown 方法
7
    probeType: 3
8
  },
9
  pullUpLoad: {
10
    threshold: 50        // 底部上拉的距离 决定开始加载的时机。当上拉加载数据加载完毕后，需要执行 finishPullUp 方法
11
  }
12
});
13
//上拉加载事件
14
scroll.on("pullingUp", function () {    
15
  console.log("上拉加载数据");
16
  //可以多次执行上拉加载，没有这段代码上拉只会加载一次
17
  scroll.finishPullUp();
18
});
19
//下拉刷新事件
20
scroll.on("pullingDown", function () {  
21
  console.log("下拉刷新数据");
22
  //可以多次执行下拉刷新，没有这段代码下只会刷新一次
23
  scroll.finishPullDown();
24
});
25
//初始化
26
scroll.refresh();