vue横向滚动,并且实现点击左右按钮来进行滚动

直接上代码,可以点击左和右两个汉字进行横向滚动

<template>
    <div class="Home">
        <div style="display: flex;height: 100%;align-items: center;">
            <div @click="scrollLeft('scrollContainer1')" style="width: 80px;text-align: center;font-size: 30px;">
                左
            </div>
            <div ref="scrollContainer1"
                style="height: 100px;width: 1000px;display: flex;justify-content: space-between;overflow-x: auto;">
                <span v-for="item in 20"
                    style="width: 120px;height: 100%;display: inline-block;background: #a3a2a2;margin-right: 5px;flex-shrink: 0;">
                    {{item}}
                </span>
            </div>
            <div @click="scrollRight('scrollContainer1')" style="width: 80px;text-align: center;font-size: 30px;">
                右
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Home',
        data() {
            return {}
        },
        mounted() {},
        methods: {
            scrollLeft(row1) {
                this.$refs[row1].scrollBy({
                    left: -600, // 每次点击滚动的距离
                    behavior: 'smooth',
                });
            },
            scrollRight(row1) {
                this.$refs[row1].scrollBy({
                    left: 600, // 每次点击滚动的距离
                    behavior: 'smooth',
                });
            },
        },
    }
</script>

<style scoped>
    ::-webkit-scrollbar {
        /* 隐藏滚动条 */
        display: none;
    }
</style>

翻译

搜索

复制