vue 横向滚动

<template>
    <div class="details_top_box">
        <div class="details_top">
            <div class="button_item_box" ref="box">
                <div
                    @click="setCode(v)"
                    v-for="(v, i) in buttonList"
                    :key="i"
                    :class="['button_item', code == v.code ? 'primary' : '']"
                >
                    {{ v.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailsTop',
    components: {},
    data() {
        return {
            buttonList: [],
            code: 'W0101',
        };
    },
    props: {},
    watch: {},
    methods: {
        stationTypeDict() {
            const stationTypeDict = this.$iepUtils.stationType.stationTypeDict;
            const list = [];
            for (const key in stationTypeDict) {
                if (Object.hasOwnProperty.call(stationTypeDict, key)) {
                    const obj = {
                        name: stationTypeDict[key],
                        code: key,
                    };
                    list.push(obj);
                }
            }
            this.buttonList = list;
        },

        setCode(item) {
            this.code = item.code;
        },
        handleScroll(e) {
            // 0----down  1----up
            var direction = e.deltaY > 0 ? '0' : '1';
            const tabBar = this.$el.querySelector('.details_top');
            //下面的实现的是内部元素横向滚动，前提设置好内部元素横向的滚动样式了
            if (direction === '0') {
                tabBar.scrollLeft += 30;
            } else {
                tabBar.scrollLeft -= 30;
            }
        },
    },
    computed: {},
    created() {},
    mounted() {
        this.stationTypeDict();
        this.code = this.buttonList[0].code;
        const tabBar = this.$el.querySelector('.details_top');
        tabBar.addEventListener('mousewheel', this.handleScroll); // 监听滚轮滚动事件
    },
    destroyed() {},
};
</script>

<style scoped lang="less">
.details_top {
    width: 98%;
    height: 40px;
    // display: flex;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
        display: none;
    }
    .button_item_box {
        position: absolute;
        height: 40px;
        left: 0;
        display: flex;
        flex-flow: row nowrap;
    }
    .button_item {
        width: max-content;
        padding: 10px 27px;
        color: #fff;
        background: #a8bad4;
        border-radius: 6px;
        // font-family: 'Microsoft YaHei Bold';
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        color: #fff;
        margin-right: 14px;
        cursor: pointer;
    }
    .primary {
        background: #0f6eff;
    }
}
</style>