Vue横向菜单滚动翻页功能的实现

转载CSDN博主「watanaki」的原创文章
原文链接：https://blog.csdn.net/Watanaki/article/details/111060410

横向菜单滚动翻页功能的实现

实现方法

使用了走马灯的思想，将菜单项放在一排，超过显示区域隐藏，点击实现菜单的滚动。

效果图

具体实现

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大于实际宽度与可视宽度的差，右边就会出现错误。