项目遇到的坑

①　滚动问题（只有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()
})