简介

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 --saveyarn 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事件，如果需要点击，这里要设为truepullUpLoad: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/