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 '#'
vue引入文件报错,删除.babelrc中的plugins的transfrom-runtime

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

6.打包路径出错


vue-jd页面总结_第1张图片
image
vue-jd页面总结_第2张图片
image

子目录设置:

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

你可能感兴趣的:(vue-jd页面总结)