H5横向滑动菜单
最近处理一个需求,产品需要做一个顶部横向的菜单栏,类似于今日头条首页的菜单栏
先来看看效果:
构思
首先说说我的思路吧 ,通过设置一个横向的导航栏,滑动到顶部后悬浮,然后滑下来后再继续随着页面滑动。
实现过程
1、设置导航栏,这里我们需要一个三层div嵌套的导航
导航栏核心代码
<div class="nav" ref="nav">
<div class="fixednav" ref="fixednav">
<div class="fixednavcontent" ref="fixednavcontent">
<p v-for="item,index of items" class="tabtitle" :class="{selecttab:active===item}" @click="changeTab(item)">{
{item}}</p>
</div>
</div>
</div>
导航栏样式
.nav {
top: 0;
height: 90px;
width: 100%;
background: white;
z-index: 1;
border-bottom: solid 1PX #dbdbdb;
.fixednav {
overflow-x: scroll;
.fixednavcontent {
display: flex;
float: left;
}
}
.tabtitle {
width: 180px;
font-size: 28px;
line-height: 88px;
text-align: center;
height: 88px;
border: none;
box-shadow: none;
color: #bbb;
}
.selecttab {
position: relative;
color: #4FBF86;
&::after {
position: absolute;
content: " ";
bottom: 0px;
left: 50%;
width: 40px;
height: 8px;
border-radius: 4px;
background: #00a86a;
position: absolute;
transform: translateX(-50%);
}
}
}
2、控制菜单栏滑动到页面头部时固定
toScroll() {
if (this.$refs.headcontent && this.$refs.headcontent.getBoundingClientRect().bottom < 0) {
this.$refs.nav.style.position = 'fixed';
} else {
this.$refs.nav.style.position = 'relative';
}
}
说明一下,这里的this.$refs.headcontent是导航上部分内容,这里取它的下边沿距离页面顶部的距离,来给导航栏设置position为相对定位还是fixed;
3、控制tab切换这里设置active来标记导航当前选中的哪一个
changeTab(tab) {
if (tab != this.active) {
this