vue-jd页面总结

1.touchmove不能触发，touchstart，touchend可以触发

imgBox.addEventListener('touchstart',touch, false); 
imgBox.addEventListener('touchmove',touch, false);
imgBox.addEventListener('touchend',touch, false); 
//添加如下代码imgBox可以执行
document.addEventListener('touchmove',touch, false);

原因：元素imgBox在执行touchmove时高度为0，所以不能触发，但添加document.addEventListener后，自动触发touchmove事件，所以imgBox下的touchmove事件也能顺利进行了。

2.无缝轮播transition动画异步加载

//回缩第一张
imgBox.style.transition = "none";
obj.style.transform="translateX(0px)"
//动画下一张
imgBox.style.transition = "all 0.3s ease 0s";
obj.style.transform="translateX(-300px)"

由于动画异步加载的原因，在设置回缩后会被播放下一张的动画覆盖，因此使用如下代码，或使用jq的stop。

function tEnd(){
    if (indexx >= ols.length-1) { 
        indexx =1;
    console.log(111111)
    // imgBox.style.transform = "translateX(0px)";
    imgBox.style.transition = 'none'
    setTransfrom(-300);
    
    
    // setTransfrom(-indexx * banner.offsetWidth);
     // return
    }
    console.log(222)
}
imgBox.addEventListener('transitionend',tEnd,false);

3.eslint不识别tab空格

4.报错Cannot assign to read only property 'exports' of object '#<Object>'
vue引入文件报错，删除.babelrc中的plugins的transfrom-runtime

5.路由路径需一一对应。

6.打包路径出错

image

子目录设置：

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes
})

vue-jd页面总结

推荐阅读更多精彩内容