在iscroll在使用之前必须要实例化,
document.getElementById("wrapper").addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', function () { setTimeout(self.loaded,300); }, false);
loaded:function(){ var self = this; var maxHei; myScroll = new iScroll('wrapper', { mouseWheel: true, tap: true , onScrollMove:function(){ maxHei = this.y; }, onScrollEnd:function(){ if(!self.loadingShow && !self.lately){ self.page++; $("#wrapper").css("top","2.13rem"); self.getStoreAndStaff(mchId,self.provinceId,self.cityId,self.areaId); } }, checkDOMChanges:true }); },
注意事项
1.只有wrapper里的第一个子元素才可以滚动,如果想要更多元素可以滚动,可以将需要滚动的元素放到第一个子元素下面
<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... </ul> <ul> <li></li> ... </ul> </div> </div>
2.使用vue时,获取了数据,但是数据还没有在页面上展现出来,DOM还没改变时,调用iscroll.refresh()无效,需要使用setTimeOut设置延迟。
3.iscroll 变态的将iscroll DOM click事件全部禁止了,解决方法修改iscroll.js
onBeforeScrollStart方法和_end方法
/*onBeforeScrollStart: function (e) { e.preventDefault(); },*/ onBeforeScrollStart:function (e) { var target = e.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'IMG' ) e.preventDefault(); },
that.doubleTapTimer = setTimeout(function () { that.doubleTapTimer = null; // Find the last touched element target = point.target; while (target.nodeType != 1) target = target.parentNode; if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'IMG' ) { ev = document.createEvent('MouseEvents'); ev.initMouseEvent('click', true, true, e.view, 1,point.screenX, point.screenY, point.clientX, point.clientY,e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,0, null); ev._fake = true; target.dispatchEvent(ev); /*ev = doc.createEvent('MouseEvents'); ev.initMouseEvent('click', true, true, e.view, 1, point.screenX, point.screenY, point.clientX, point.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null); ev._fake = true; target.dispatchEvent(ev);*/ } }, that.options.zoom ? 250 : 0);