vue中router-link的replace属性、iframe存在的坑、IntersectionObserver的使用、webpack启动本地服务的配置

2018-08-03

移动端iframe的坑

由于公司业务需求，开发的h5被嵌入iframe中，导致了一系列的问题（iframe这个东西是真的坑qAq），iframe导致页面滑动很卡，不流畅。
在ios内，无法检测到iframe内部的滚动，导致滚动加载失效(最后使用点击加载更多解决),后来发现其实可以用IntersectionObserver,垫片库(ps:不得不说,阮一峰老师的博客确实干货满满)

页面使用vue开发，有个类似tab切换时是用路由实现的，导致浏览器回退会进行tab切换，在router-link标签上加上replace属性即可阻止浏览器的路由回退。

如何将本地页面在手机上浏览

手机和电脑在同一个局域网内，vue中在config里面的index.js中将webpack的服务启动的host改成0.0.0.0,然后通过访问本机ip:端口号就可以访问到页面了。

使用宝塔也可以这么玩，host为0.0.0.0就行了。

总的来说，只要你起的服务host是0.0.0.0,就可以在局域网中通过手机访问。

防连击操作

//1.存在异步操作的时候
var flag=false;
dom.click=function(){
    if(flag){
        return false;
    }
    flag=true;
    //异步操作
    axios()
    .then(function(){
    
    })
    .catch(function(){
        
    })
    //如果是用ajax发的请求，则在complete回调函数中将flag改为false;
    .finally(function(){
       flag= false; 
    })
}
//2.没有异步操作的时候
dom.click=function(){
    if(localStorage.getItem('a')){
        return false;
    }
    localStorage.setItem('a','1');
    setTimeout(function(){
     localStorage.removeItem('a');
  },300)
}

移动端滑动穿透

移动端弹出有一个fixed定位的弹层，弹层内有滚动条，当滚动弹层内容时，body会跟随滚动，这种现象叫滚动穿透。解决方案，当出现弹层的时候给body加上.fixed{position:fixed}的类或者给html和body加上.over{overflow:hidden}的类并记录下页面滚动距离，等弹层消失的移除相应类名并滚动到对应位置。代码地址
移动端加overflow: scroll;滑动会很卡，这时需要对需要滑动的盒子加上 -webkit-overflow-scrolling: touch;这样滑动会变得流畅。