这几天刚刚到新公司,他们做了一个基于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,