使用iscroll的问题与解决办法

最新推荐文章于 2019-08-22 15:15:46 发布

YZiAngel

最新推荐文章于 2019-08-22 15:15:46 发布

阅读量1.5k

点赞数 1

分类专栏：前端工程师

本文链接：https://blog.csdn.net/yzi_angel/article/details/53323426

版权

52 篇文章 0 订阅

订阅专栏

我们都知道，当列表里数据有很多的时候，我们会考虑将其分为很多条小数据，然后通过滑动事件触发ajax请求数据，然后将数据替换到页面中进行渲染。通常，我们都会考虑使用iscroll插件，但是使用的同时又会出现很多的问题。如下：

a)、每个列表上都有一个a链接，但是，当点击的时候没有任何反应。

一开始我们可能考虑是上边有覆盖层，当点击页面的时候，不能捕获a标签，但是给其的z-index调大，还是不能点击。

其实这个问题是，系统默认将事件识别成为滑动，然后当成页面下拉刷新来处理。具体的原因是，使用的iscroll插件时，它将所有的a标签的默认行为给禁止了。

解决办法是在iscroll-probe.js插件中找到preventDefaultException，然后按照下边进行修改：

/preventDefault: true,
preventDefault: false,
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ },

b)、还有一个问题就是，当滑动的时候，页面有卡顿，而且页面移动的距离明显大于手指滑动的问题。

解决办法是在js后边加上：

ocument.addEventListener('touchmove', function (e) {
    e.preventDefault();
}, false);

关注