通过Scroller.js制作上拉加载和下拉刷新

为什么80%的码农都做不了架构师？>>>

之前做移动端webAPP开发,一直是用的IScroll来做滚动列表,但是IScroll没有直接提供上下拉刷新的功能,虽然我们基于IScroll自己实现了一套,但IScroll依然有不少bug.就拿点击来说吧,在某些型号的手机上会连续触发2次click.原因是配置项的{click:true}对某些手机有效,某些手机无效.

最近在网上发现了Scroller.js这个库,看了一下API,我们需要的功能都有,以下是一个可上下拉刷新的滚动列表实现:

注:上下拉刷新是Scroller.js的插件功能,所以官方文档没有详细的API

// Prevents viewport bouncing iOS
document.addEventListener('touchmove', function (e) {e.preventDefault();}, false);var scrollerConfig = {useCSSTransition: true,gpuOptimization: true,pullToRefresh :true,pullToRefreshConfig:{labelPull:"下拉刷新",labelClick:"点击刷新",labelRelease:"释放刷新",labelUpdate:"刷新中..."},onPullToRefresh : function(e){setTimeout(function () {e();}, 1500);},pullToLoadMore:true,pullToLoadMoreConfig:{labelPull:"上拉加载",labelClick:"点击加载",labelRelease:"释放加载",labelUpdate:"加载中..."},onPullToLoadMore:function(e){setTimeout(function () {e();}, 1500);}
};window.scroller = new Scroller('#wrapper', scrollerConfig);

官网: http://scrollerjs.com/

转载于:https://my.oschina.net/wolfx/blog/632549

通过Scroller.js制作上拉加载和下拉刷新相关推荐

【前端知识之JS】如何实现上拉加载和下拉刷新
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍如何实现上拉加载和下拉刷新. 文章目录前言一.介绍二.实现原理 1.上拉加载 2.下拉刷新一.介绍下拉刷新和上拉加载这两种交互方式通常 ...
better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...
基于iSroll 5.0实现的上拉加载和下拉刷新插件
Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
前言上拉加载和下拉刷新是小程序开发的常见需求.本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能,为用户带来更加流畅.便捷的使用体验. 实现效果如下: 实现思路: 1. 首先需要在使用到的 j ...
如何实现上拉加载，下拉刷新？
如何实现上拉加载,下拉刷新? 一.前言二.实现原理上拉加载下拉刷新三.案例小结一.前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同 ...
如何实现上拉加载和下拉刷新
下拉刷新和上拉加载这两种交互⽅式通常出现在移动端中本质上等同于PC⽹⻚中的分⻚,只是交互形式不同开源社区也有很多优秀的解决⽅案,如 iscroll . better-scroll . pullto ...
面试官：JavaScript如何实现上拉加载，下拉刷新？
一.前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同开源社区也有很多优秀的解决方案,如iscroll.better-scroll.pullto ...
html5上拉下拉刷新,APP 上拉加载，下拉刷新介绍
开发APP时,很多时候都会用上,上拉加载数据,下拉刷新等功能,本文件介绍两种. 一种是原生APP自带的上拉加载,下拉刷新功能,一种是用JS 插件写的上拉加载,下拉刷新. 1.原生APP 的上拉加载, ...
小程序上拉加载，下拉刷新
小程序上拉加载,下拉刷新 data: {collectinformation: null,number: 1,size: 10,isOpenLoading: true,isEmpty: true,is ...
tableview插入刷新_iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码...
废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" ...

通过Scroller.js制作上拉加载和下拉刷新

通过Scroller.js制作上拉加载和下拉刷新相关推荐

最新文章

热门文章