易网时代-编程资源站
易网时代-编程资源站 
横向菜单滚动翻页功能的实现
实现方法
使用了走马灯的思想，将菜单项放在一排，超过显示区域隐藏，点击实现菜单的滚动。
效果图
具体实现
html部分
<div class="dataNav">
<button class="dataNavPrev" @click="navPrev"><</button> //向前翻页按钮
<ul class="dataNavList" ref="dataNavList">
<li class="dataNavListItem" v-for="(item, index) in navList" :key="index" :style="{transform:'translateX(-'+move+'px)'}">{{item}}</li>
//move变量为每次移动的距离，菜单项向左移的所以移动距离是负值，负号写好了，使move是正值方便计算
</ul>
<button class="dataNavNext" @click="navNext">></button> //向后翻页按钮
</div>
CSS部分
.dataNav {
display: flex;
height: 70px;
.dataNavList {
display: flex;
// 超出部分隐藏
overflow: hidden;
.dataNavListItem{
display: inline-block;
height: 35px;
//每个菜单项的宽度要固定，不然move值无法计算，当然也可以通过其他方法来设置以适应自己的表格
width: 70px;
min-width: 70px;
margin: auto 0;
border-radius: 5px;
font-size: 13px;
text-align: center;
color: #7E8690;
line-height: 35px;
// 过渡效果
transition:transform .2s;
}
:hover {
color: #1D4190;
background-color: #c7cede;
cursor: pointer;
}
}
// 按钮样式
.dataNavPrev,
.dataNavNext{
display: inline-block;
width: 35px;
min-width: 35px;
height: 35px;
margin: auto 0;
border: none;
border-radius: 5px;
text-align: center;
line-height:35px;
background-color: rgba(0,0,0,0);
&:focus{
outline: none;
}
&:hover{
color: #1D4190;
background-color: #c7cede;
cursor: pointer;
}
}
.dataNavNext{
margin-left: auto;
}
}
JS部分
data () {
return {
navList: [......],
move:0,
dataNavListRealWidth:0,
dataNavListViewWidth:0,
};
},
mounted() {
// scrollWidth获取整个菜单实际宽度
this.dataNavListRealWidth = this.$refs.dataNavList.scrollWidth;
// offsetWidth获取菜单在当前页面可视宽度
this.dataNavListViewWidth = this.$refs.dataNavList.offsetWidth;
//实际宽度减去可视宽度就是可移动的范围即move的范围
// 窗口大小变化时触发。实时更新可视宽度
window.onresize = () => {
return (() => {
this.dataNavListViewWidth = this.$refs.dataNavList.offsetWidth;
//注1，详见下方
if(this.move>this.dataNavListRealWidth-this.dataNavListViewWidth-70){
this.move=this.dataNavListRealWidth-this.dataNavListViewWidth;
}
})()}
},
methods:{
// 当菜单项向右的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即右移移动一个菜单项的宽度），
// 当菜单项向右的可移动距离小于单个菜单项的宽度时，move等于0（即回到最开始没有移动的状态）
navPrev(){
if(this.move>70){
this.move=this.move-70;
}else{
this.move=0
}
},
// 当菜单项向左的可移动距离大于单个菜单项的宽度时，move减去一个菜单项的宽度（即左移移动一个菜单项的宽度），
// 当菜单项向左的可移动距离小于单个菜单项的宽度时，move等于可以向左移动的最大值（即到最末尾）
navNext(){
if(this.move<this.dataNavListRealWidth-this.dataNavListViewWidth-70){
this.move=this.move+70;
}
else{
this.move=this.dataNavListRealWidth-this.dataNavListViewWidth
}
},
},
}
注1
窗口改变时，由于可移动距离即move的范围改变，move也要及时更新，若是不实时更新，当窗口由小变大切菜单显示末尾一段时会出现下边的错误
举个例子：
菜单项宽100；可视区域宽500；实际宽度1000；可移动500；目前菜单项向左移动400
窗口放大，可视区域变为700时
此时，move大于实际宽度与可视宽度的差，右边就会出现错误。