Iscroll4 实现下拉刷新,上拉加载,现在出现一个问题,就是当我在下拉刷新的同时,马上进行上拉

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Iscroll4 实现下拉刷新,上拉加载,现在出现一个问题,就是当我在下拉刷新的同时,马上进行上拉相关的知识,希望对你有一定的参考价值。

Iscroll4 实现下拉刷新,上拉加载,现在出现一个问题,就是当我在下拉刷新的同时,马上进行上拉加载,页面会出现两条相同的数据,怎么解决?

1、在options中加入如下参数代码(我的代码是在2470行):

//原本就有的部分

HWCompositing: true,
useTransition: true,
useTransform: true,
//我加入的部分
minScrollY : 0,
minScrollX : 0

2、在下面不远处(十行以内)加入如下参数:

//新加部分

this.minScrollY = this.options.minScrollY;
this.minScrollX = this.options.minScrollX;
原先就有的部分
this.translateZ = this.options.HWCompositing && utils.hasPerspective ? \' translateZ(0)\' : \'\';

3、最后一处修改,在resetPosition方法内,此处直接贴上更改之后的方法,其实真正的修改只是将this.minScrollX修改成了(代码在2830行左右):

resetPosition: function (time)

var x = this.x,
y = this.y;

time = time || 0;

if ( !this.hasHorizontalScroll || this.x > this.minScrollX )
x = this.minScrollX;
else if ( this.x < this.maxScrollX )
x = this.maxScrollX;


if ( !this.hasVerticalScroll || this.y > this.minScrollY )
y = this.minScrollY;
else if ( this.y < this.maxScrollY )
y = this.maxScrollY;


if ( x == this.x && y == this.y )
return false;


this.scrollTo(x, y, time, this.options.bounceEasing);

return true;
,
全部修改内容如上,调用的时候,只需要传入minScrollX、minScrollY参数便可实现下拉后回弹上面的预留位置了。
注:对于scroll的滚动区域小于包裹容器的,iscroll禁止滚动,会造成无法实现下拉刷新,这里有一个小技巧,就是给滚动区域加一个min-height:101%;
最后附上此次修改的dome下载地址,由于dome最初也是从别处拿的(最初的dome不能满足需求),其中的css布局方面个人觉得有些不好,但由于最近工作紧张也没有去改,暂时就先这样吧,有空会优化一下的。
参考技术A 把下拉的判断写在前头,在触发下拉的方法时,把上拉赋的值清空一下就行了
pullDownEl = document.getElementById('pullDown');
pullDownEl.className = '';

react-iscroll和iScroll怎么实现下拉刷新

参考技术A 1、引用iScroll.js,在初始化时添加两个事件监听:touchMove、DOMContentLoaded。2、实现iScroll插件的onScrollEnd事件,也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。3、上拉加载请求后台时就相当于分页请求数据,这

以上是关于Iscroll4 实现下拉刷新,上拉加载,现在出现一个问题,就是当我在下拉刷新的同时,马上进行上拉的主要内容,如果未能解决你的问题,请参考以下文章

ListView上拉加载和下拉刷新多种实现方式

下拉刷新,上拉加载 的基础款(基本实现)

ListView上拉加载和下拉刷新多种实现方式

vue中好用的下拉刷新、上拉加载插件mescroll.js

带你实现开发者头条APP--RecyclerView下拉刷新上拉加载

实现tab左右滑动切换与下拉刷新,上拉加载结合