简介

better-scroll 是一款近几年移动端常用的插件，重点解决移动端（已支持PC）各种滚动场景需求的插件。可以实现竖向滚动效果，也可以实现横向滚动的效果。它不仅可以做普通的滚动列表，还可以做轮播图、局部文字滚动、下拉刷新、上拉加载等等。

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

better-scroll 的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

安装

1、使用npm安装

npm install @better-scroll/core@next --save

2、或者使用yarn安装

yarn add @better-scroll/core@next -S

3、也可以直接下载 js 文件，进入链接 Ctrl+s 保存文件至项目目录中 better-scroll.js

4、使用npm或者yarn安装完成后，就可以在代码中引入了

import BScroll from '@better-scroll/core'

5、如果是commonjs的语法，使用require引入

var BScroll = require('@better-scroll/scroll')

使用

better-scroll 2.0 版本的设计中引入了插件，如果你只需要一个拥有基础滚动能力的列表，只需要引入 core。如果你需要一些额外的 feature。比如 pull-up load，则需要引入额外的插件。

better-scroll已有的插件：

pulldown，监听下拉动作，可以实现下拉刷新；
pullup，监听上拉动作，可以实现上拉加载；
scrollbar，自定义滚动条；
slide，用于实现轮播图效果；
wheel，是实现类似 IOS picker 的基石，可以实现城市联动选择器；
zoom，实现缩放效果；
mouse-wheel，鼠标滚轮操作，可以用来操作列表内容滚动、轮播图的切换等；
observe-dom，开启对scroll区域dom改变的监听；当dom改变时，触发对应的函数；
infinity，实现无限滚动，有大量的列表数据需要渲染时使用，它可以实现部分渲染；
nested-scroll，实现双层嵌套的滚动效果；
better-scroll，包含以上的所有插件

通过全局方法BScroll.use()来使用插件，它需要在你调用 new BScroll()之前完成。

import BScroll from "@better-scroll/core";
import PullUp from '@better-scroll/pull-up';
BScroll.use(PullUp);

下拉刷新上拉加载

这里我们使用pulldown 和 pullup 这两个插件

1、使用npm或者yarn安装这两个插件

npm install @better-scroll/pull-down@next @better-scroll/pull-up@next --save
yarn add @better-scroll/pull-down@next @better-scroll/pull-up@next -S

2、html 结构

<div id="position-wrapper">
    <div>
        <p class="refresh">下拉刷新</p>
        <div class="position-list">
			<!--列表内容-->
        </div>
        <p class="more">查看更多</p>
    </div>
</div>

3、引入插件，并通过全局方法BScroll.use()来使用插件

import BScroll from "@better-scroll/core";
import PullDown from "@better-scroll/pull-down";
import PullUp from '@better-scroll/pull-up';
BScroll.use(PullDown);
BScroll.use(PullUp);

4、实例化 BetterScroll ，并传入相关的参数

let pageNo = 1,pageSize = 10,dataList = [],isMore = true;  
var scroll=new BScroll("#position-wrapper",{
    scrollY:true,//垂直方向滚动
    click:true,//默认会阻止浏览器的原生click事件，如果需要点击，这里要设为true
    pullUpLoad:true,//上拉加载更多
    pullDownRefresh:{
        threshold:50,//触发pullingDown事件的位置
        stop:0//下拉回弹后停留的位置
    }
});
//监听下拉刷新
scroll.on("pullingDown",pullingDownHandler);
//监测实时滚动
scroll.on("scroll",scrollHandler);
//上拉加载更多
scroll.on("pullingUp",pullingUpHandler);
  
async function pullingDownHandler(){
    dataList=[];
    pageNo=1;
    isMore=true;
    $(".more").text("查看更多");
    await getlist();//请求数据
    scroll.finishPullDown();//每次下拉结束后，需要执行这个操作
    scroll.refresh();//当滚动区域的dom结构有变化时，需要执行这个操作
}
async function pullingUpHandler(){
    if(!isMore){
        $(".more").text("没有更多数据了");
        scroll.finishPullUp();//每次上拉结束后，需要执行这个操作
        return;
    }
    pageNo++;
    await this.getlist();//请求数据
    scroll.finishPullUp();//每次上拉结束后，需要执行这个操作
    scroll.refresh();//当滚动区域的dom结构有变化时，需要执行这个操作    
}
function scrollHandler(){
    if(this.y>50) $('.refresh').text("松手开始加载");
    else $('.refresh').text("下拉刷新");
}
function getlist(){
    //返回的数据
    let result=....;
    dataList=dataList.concat(result);
    //判断是否已加载完
    if(result.length<pageSize) isMore=false;
	//将dataList渲染到html内容中
}