① 滚动问题(只有document.body.scrollTop的话,这个在Firefox,mac的谷歌下都是0,从而一直是卡顿现象)
scroll_To: function( tarY, el){
if(el){
let element = document.getElementById(el);
tarY = element.offsetTop;
}
let _this = this;
let timer = setTimeout(function(){
let currentY = document.body.scrollTop || document.documentElement.scrollTop, step = 50;
if (tarY > currentY){
let dist = Math.ceil((tarY - currentY) / step), nextY = currentY + dist;
if( nextY < tarY ){
window.scrollTo(0, nextY);
// document.body.scrollTop = nextY;
// document.documentElement.scrollTop = nextY;
_this.scroll_To(tarY);
}else{
window.scrollTo(0, tarY);
// document.body.scrollTop = tarY;
// document.documentElement.scrollTop = tarY;
}
}else{
let dist = Math.floor((tarY - currentY) / step), nextY = currentY + dist;
if( nextY > tarY ){
window.scrollTo(0, nextY);
// document.body.scrollTop = nextY;
// document.documentElement.scrollTop = nextY;
_this.scroll_To(tarY);
}else{
window.scrollTo(0, tarY);
// document.body.scrollTop = tarY;
// document.documentElement.scrollTop = tarY;
}
}
}, 1);
}
1.各浏览器下 scrollTop的差异:
IE6/7/8:
可以使用 document.documentElement.scrollTop
;
IE9及以上:
可以使用window.pageYOffset
或者document.documentElement.scrollTop
Safari:
safari: window.pageYOffset
与document.body.scrollTop都可以;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset 或者 document.documentElement.scrollTop
;
Chrome:
谷歌浏览器只认识document.body.scrollTop
;
注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.
② 26字母筛选问题
对于touchstart, touchmove都有阻止浏览器的默认行为,所以要e.preventDefault()
但是对于vue,本身提供了prevent修饰符,但是每次在安卓机上开始触碰字母时,有时会出现主体界面滚动,只要手不放开,是没触发到绑定在字母层面上的触摸事件的。
chooseByLetter(method, item, event){
switch(method){
case 'start':
this.isHover = true;
this.letterText = item.value;
let startEl = document.getElementsByClassName(item.className)[0];
if(startEl){
this.coordinate = startEl.offsetTop;
this.$nextTick(()=>{
window.scrollTo(0, Math.abs(startEl.offsetTop));
});
}
break;
case 'move':
let clientY = event.changedTouches[0].clientY - 30;
let index = Math.ceil(clientY/this.liHeight > 0 ? clientY/this.liHeight : 0);
this.letterText = this.letterObj[index-1].value;
let className = this.letterObj[index-1].className;
let el = document.getElementsByClassName(className)[0];
if(el){
this.coordinate = el.offsetTop;
this.$nextTick(()=>{
window.scrollTo(0, Math.abs(this.coordinate));
});
}
break;
case 'end':
this.isHover = false;
this.$nextTick(()=>{
window.scrollTo(0, Math.abs(this.coordinate));
});
document.querySelector('body').className = '';
case 'click':
this.isHover = false;
document.querySelector('body').className = '';
break;
}
}
后面直接用了css来取消浏览器的默认行为 touch-action: none;
3. IE 前端传中文字符串会出现乱码现象, 采用encodeURIComponent进行编码即可
4. vue-router $router.go(-1)在低版本webkit的webview中失效,换用$router.push()
Vue.prototype.historyState = []//缓存路由 //记录路由路径 router.beforeEach((to, from, next) => { var beforeState = Vue.prototype.historyState.slice(-2,-1)[0] ? Vue.prototype.historyState.slice(-2,-1)[0] : {}; var lastState = Vue.prototype.historyState.slice(-1)[0] ? Vue.prototype.historyState.slice(-1)[0] : {}; console.log(beforeState,lastState,to,from) if(beforeState.name === to.name && lastState.name === from.name){ Vue.prototype.historyState.pop() }else{ let query = {} if(to.name !== 'App' && to.name !== 'Home'){ query = to.query } Vue.prototype.historyState.push({ name: to.name, query: query }) } console.log(Vue.prototype.historyState) next() })