vue3长菜单切换代码记录

常见的横向长菜单切换

<template>
    <div class="cust-menu">
        <div class="cust-menu-wrap" >
            <div @click="scrollLeft" class="left-box" >
                左
            </div>
            <div ref="scrollContainer1" class="content-box">
                <span v-for="item in 20" :key="item" class="content-item">
                    {{item}}
                </span>
            </div>
            <div @click="scrollRight" class="right-box" >
                右
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
      
    const scrollContainer1 = ref(null)
    const scrollLeft = (row1) => {
        scrollContainer1.value.scrollBy({
            left: -600, // 每次点击滚动的距离
            behavior: 'smooth',
        });
    }
    const scrollRight = (row1) => {
        scrollContainer1.value.scrollBy({
            left: 600, // 每次点击滚动的距离
            behavior: 'smooth',
        });
    }
</script>

<style lang="scss" scoped>
    .cust-menu {
        width: 100%;
        height: 100%;
        .cust-menu-wrap {
            display: flex;
            height: 100%;
            align-items: center;
        }
        .left-box {
            width: 80px;
            text-align: center;
            font-size: 30px;
        }
        .right-box {
            width: 80px;
            text-align: center;
            font-size: 30px;
        }
        .content-box {
            height: 100px;
            width: 1000px;
            display: flex;
            justify-content: space-between;
            overflow-x: auto;
        }
        .content-item {
            width: 60px;
            height: 100%;
            display: inline-block;
            background: #a3a2a2;
            margin-right: 5px;
            flex-shrink: 0;
        }
    }   
    ::-webkit-scrollbar {
        /* 隐藏滚动条 */
        display: none;
    }
</style>