使用轮播图之后，页面的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元素不需要。
