better-scroll 实现下拉刷新、上拉加载的那些坑

简介

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内容中
}    

注意

使用better-scroll 实现下拉刷新、上拉加载时要注意以下几点：

• wrapper里必须只有一个子元素；
• 子元素的高度要比wrapper要高；
• 使用的时候，要确定DOM元素是否已经生成，必须要等到DOM渲染完成后，再new BScroll();
• 滚动区域的DOM元素结构有变化后，需要执行刷新 refresh() ；
• 上拉或者下拉，结束后，需要执行finishPullUp()或者finishPullDown()，否则将不会执行下次操作；
• better-scroll，默认会阻止浏览器的原生click事件，如果滚动内容区要添加点击事件，需要在实例化属性里设置click:true；

better-scroll API文档：https://better-scroll.github.io/docs/zh-CN/