移动端web开发项目心得

使用轮播图之后，页面的header和footer的width：100%被撑宽，fixed失效。

在homepage中，使用了饿了么的better-scroll组件制作一个轮播图，但是因为轮播图组件有一个元素的宽度是页面宽度的几倍，导致顶部的header和底部的footer设置的width:100%继承了这个过宽的宽度，超出了页面范围。
通过给父元素设置overflow:auto，设置宽度，设置高度都没有解决。
解决width:100%的问题可以使用js计算的方法，用document.documentElement.clientWidth获取设备宽度，然后赋值给header和footer。但是不能解决fixed失效的问题。

有说当父元素有transform属性时，fixed元素的width:100%是父元素的宽度而不是可视区域宽度，但是这里是header的兄弟元素的子节点使用了transform来实现轮播图，未能解决。

最后发现，需要对兄弟元素设置css属性，header和footer中间设置一个div包裹主题内容，并设置css属性为：

.content{
    height:100vh;
    width:100vw;
    overflow: auto;
  }

移动端下拉菜单

hover 在苹果最新版的safari浏览器不兼容，第一次点击显示hover效果，第二次才进入链接。
查了下hover，应该是兼容webkit的，但是移动端效果就不好了。
给下拉菜单设置css如下:

.drop-down-menu {
        background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        list-style-type: none;
        padding: 0.3rem 1rem;
        position: absolute;
        top: @sub-header-height;
        transform-origin: center top 0;
        z-index: 3;
        transform: scale(0);
        -webkit-transition: all .6s ease 0s;
        transition: all .6s ease 0s;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
}

然后给元素绑定点击事件。
···
unfoldFirst(){
let ele = this.$refs.dropDownMenuFirst;
if(ele.style.transform === "scale(0)"){
ele.style.transform = "scale(1)";
}else{
ele.style.transform = "scale(0)";
}
},
···

vux组件点击事件失效

必须使用v-on:click.native=""绑定事件才行。给组建绑定原生时间。
router-link会组织click事件。
当你给一个vue组件绑定事件时，需要添加上native，如果是普通的html元素不需要。