简介
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/