【手机端】iPhone、iPad上Safari浏览器的橡皮筋效果阻止

最新推荐文章于 2023-11-07 15:07:27 发布

飞在泥里的Jackie

最新推荐文章于 2023-11-07 15:07:27 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前段

本文链接：https://blog.youkuaiyun.com/wqelsysk/article/details/48827911

这几天刚刚到新公司，他们做了一个基于TkinkPHP框架的一个订货系统，因为临近上线了，所以我也搞不大懂。索性就不管了，招头头问了问需不需要做一个什么效果，偷偷说做一个下拉刷新的效果，然后就去做了。

有个一插件名字叫做iScroll.js，谁写的我忘了，我看了一下源代码大约是1000行，不算长。寻思放着以后再看，就没管它。

然后就开始自己做，思路是做成一个插件，使用了构造函数+原型的模式。

结构是

<div class=''wrapper'>
   <ul di="the-scroller"><li>....<li>
   </ul>
</div>

css很简单，就不说了。

主要是在js的阶段，在构造函数内部声明默认属性，以及获得相关对象。

其中一个比较陌生和重要的就是默认属性和客户自定义属性的获取。

我开始是这样写的

function PullScroller(){
     this.option = {
        id:arguments[0].id||"wrapper",
        type:arguments[0].type||"up"
}

很Low的方式，要是一个两个还好，要是200个呢？（Question1）

所以我看了iscroll.js的代码，

function PullScroll(el, options){
    //------------default option------------
    this.options = {
        listId:'',moveType:'up',CLName:'loading'
    };
    //------------user option------------
    for (i in options) this.options[i] = options[i];//i是key通过arr[key]的方式访问value

}

首先new的时候要把wrapper这个容器先传进去，然后后面跟一个options参数对象，这个对象就是客户可以自定义的参数接口，用for(key in value)的方式获得客户设置的每一个对象的值，然后赋值给默认的属性。关键是根据key来区分每一不同得属性。

事件，关于touch的事件ontouchstart,touchmove,ontouchend，开始写的是用那种事件里面嵌套事件的方式写的，基本效果可以实现，但是在ontouchstart之后，ontouchmove里面的判断不好用，只要点击就会触发ontouchend事件。（Question2）

关于这个问题分为两个步骤进行解决：

1、不再使用ontouch等方式触发事件，而是使用addEventListener来添加事件监听，从而防止事件之间相互冲突。

2、改变算法添加一个全局moving作为判断条件，如果只是start事件被触发那么moving为false，因为定义为向下移动，所以如果向上移动手指那么moving还是false，只有当向下移动成功的时候moving才是true，