简介

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

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

下拉加载实现 java_[Java教程]iscroll5实现一个下拉刷新上拉加载的效果
[Java教程]iscroll5实现一个下拉刷新上拉加载的效果 0 2016-08-24 15:00:08 直接上代码!!! * { margin: 0; padding: 0; } ul, li { ...
Android ListView 实现下拉刷新上拉加载
转载请注明出处:http://blog.csdn.net/allen315410/article/details/39965327 1.简介无疑,在Android开发中,ListView是使用非常频 ...
Android 下拉刷新上拉加载可以左右滑动
下面是下拉刷新上拉加载可以左右滑动的实例,下面是效果图: GitHub 下载地址:https://github.com/wuqingsen/MySlidingNested CSDN 下载地址:http ...
Android自定义控件实战——实现仿IOS下拉刷新上拉加载 PullToRefreshLayout
下拉刷新控件,网上有很多版本,有自定义Layout布局的,也有封装控件的,各种实现方式的都有.但是很少有人告诉你具体如何实现的,今天我们就来一步步实现自己封装的 PullToRefreshLayout ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
小程序在父组件执行子组件方法，可适用于下拉刷新上拉加载之后执行子组件方法
当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法. 思路很简单,类似于vue中给子组件加 ...
分享轮子-flutter下拉刷新上拉加载
flutter下拉上拉组件轮子什么是flutter? 首先说下flutter,估计这个应该挺多人没听过flutter这个框架,它是一个google推出的跨平台的移动应用UI框架,和React Nat ...
使用MJRefresh自定义下拉刷新,上拉加载动画
有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
Android 下拉刷新上拉载入多种应用场景超级大放送（上）
转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...

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

简介

安装

使用

下拉刷新上拉加载

注意

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

最新文章

热门文章

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

简介

安装

使用

下拉刷新 上拉加载

注意

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

最新文章

热门文章

下拉刷新上拉加载