Pc端vue2实现横向纵向鼠标滚动布局

周bro

已于 2024-09-11 15:46:41 修改

阅读量144

点赞数 1

文章标签：前端 java javascript vue.js

于 2024-07-27 01:04:19 首次发布

本文链接：https://blog.csdn.net/weixin_46631078/article/details/140727577

版权

类似uniaapp中的scroll-view组件，可横向可竖向，样式需要自己跳整一下

横向：（鼠标按下滑动里面的元素，可滑动，滚动条和左右都可以调整）

纵向：

代码实现：主页面引入组件

<template>
  <div>
    <!-- 调用组件 -->
    <!-- vertical 垂直 写宽高 例如： width: 300px;height: 200px;-->
    <!-- horizontal 水平 写宽 例如： width: 300px; -->
    <ScollIndex style="width: 200px;height: 500px;" :scrollDirection="'vertical'"></ScollIndex>

  </div>
</template>

<script>

export default {
  components: {
    // 引入组件
    ScollIndex: () => import('../components/ScrollIndex.vue')
  },
  data() {
    return {

    };
  },
  methods: {


  },
};
</script>

ScrollIndex.vue文件

<template>
    <div class="ScollView" ref="ScollView">
        <Scoll :scrollDirection="scrollDirection">
            <!-- 没有使用循环，可以改 -->
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动12</div>
            <div class="ScollBar">拖动123</div>
            <div class="ScollBar">拖动124</div>
            <div class="ScollBar">拖动1er432424</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>
            <div class="ScollBar">拖动1</div>

        </Scoll>
    </div>
</template>

<script>
export default {
    components: {
        Scoll: () => import("./Scroll.vue")
    },
    props: {
        scrollDirection: {
            type: String,
            default: 'horizontal' // 默认为横向滚动
        }
    },

    data() {
        return {

        }
    },


    mounted() {

    },
    methods: {

    }
}
</script>

<style scoped>
.ScollBar {
    padding: 15px;
    border-radius: 10px;
    margin-right: 12.5px;
    background: #eeeeee;
    font-size: 18px;
    color: #333333;
    text-align: center;
    cursor: pointer;
    margin: 20px 0;

}
</style>

Scroll.vue文件：

<template>
    <div :class="isDirection" class="scroll">
        <div ref="leftView">
            <el-button @click="scrollLeftTop">{{ scrollDirection === 'horizontal' ? '左' : '上' }}</el-button>
        </div>
        <div class="navBar" :class="isDirection"
            :style="{ overflowX: scrollDirection === 'horizontal' ? 'auto' : 'hidden', overflowY: scrollDirection === 'vertical' ? 'auto' : 'hidden' }"
            ref="nav" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
            @mouseleave="handleMouseLeave">
            <slot></slot>
        </div>
        <div ref="rightView">
            <el-button @click="scrollRightDown">{{ scrollDirection === 'horizontal' ? '右' : '下' }}</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        scrollDirection: {
            type: String,
            default: 'horizontal' // 默认为横向滚动
        }
    },
    data() {
        return {
            flag: false,
            downX: 0,
            downY: 0,
            scrollLeft: 0,
            scrollTop: 0,
            scrollAmount: 100,// 定义每次点击按钮时滚动的像素数
        }
    },
    computed: {
        // 计算是哪个方向添加不同class
        isDirection() {
            return this.$props.scrollDirection == 'horizontal' ? 'row' : 'column'
        },
    },
    watch: {
        // 监听改变滚动条和三个布局的宽高
        scrollDirection(newVal) {
            this.updateScrollbarStyle(newVal);
            this.updateWhFnc()
        }
    },

    mounted() {
        this.nav = this.$refs.nav;
        // 这里禁用了鼠标滚轮方法，如果想加后期在改动
        this.nav.addEventListener('mousewheel', (event) => event.preventDefault());
        this.updateScrollbarStyle(this.scrollDirection);
        this.updateWhFnc()
    },

    methods: {
        updateWhFnc() {
            let leftView = this.$refs.leftView;
            let rightView = this.$refs.rightView;
            if (this.scrollDirection === 'horizontal') {
                leftView.style.width = '10%'
                rightView.style.width = '10%'
                this.nav.style.width = '60%'
            } else {
                leftView.style.height = '10%'
                rightView.style.height = '10%'
                this.nav.style.height = '60%'
            }
        },
        // 动态切换滚动条样式
        updateScrollbarStyle(direction) {
            const scrollbarStyle = direction === 'horizontal' ? {
                '--scrollbar-width': '10px',
                '--scrollbar-height': '15px',
                '--scrollbar-thumb-width': '30%',
                '--scrollbar-thumb-height': '100%'
            } : {
                '--scrollbar-width': '15px',
                '--scrollbar-height': '10px',
                '--scrollbar-thumb-width': '100%',
                '--scrollbar-thumb-height': '30%',
                '--scrollbar-thumb-color': 'red'
            };
            for (const [key, value] of Object.entries(scrollbarStyle)) {
                this.nav.style.setProperty(key, value);
            }
        },
        // 鼠标按下
        handleMouseDown(event) {
            event.preventDefault()
            this.flag = true;
            if (this.scrollDirection === 'horizontal') {
                this.downX = event.clientX;
                this.scrollLeft = this.nav.scrollLeft;
            } else {
                this.downY = event.clientY;
                this.scrollTop = this.nav.scrollTop;
            }
        },
        // 鼠标移动
        handleMouseMove(event) {
            if (this.flag) {
                if (this.scrollDirection === 'horizontal') {
                    var moveX = event.clientX;
                    var scrollX = moveX - this.downX;
                    this.nav.scrollLeft = this.scrollLeft - scrollX;
                } else {
                    var moveY = event.clientY;
                    var scrollY = moveY - this.downY;
                    this.nav.scrollTop = this.scrollTop - scrollY;
                }
            }
        },
        // 鼠标抬起
        handleMouseUp() {
            this.flag = false;
        },
        // 鼠标离开
        handleMouseLeave() {
            this.flag = false;
        },
        // 左,上方法
        scrollLeftTop() {
            if (this.scrollDirection === 'horizontal') {
                this.nav.scrollLeft -= this.scrollAmount;
            } else {
                this.nav.scrollTop -= this.scrollAmount;
            }
        },
        // 右下方法
        scrollRightDown() {
            if (this.scrollDirection === 'horizontal') {
                this.nav.scrollLeft += this.scrollAmount;
            } else {
                this.nav.scrollTop += this.scrollAmount;
            }

        }
    }
}
</script>

<style scoped>
.navBar {
    /* width: 100%;
    height: 100%; */
    /* margin: 0 25px; */
    white-space: nowrap;
    user-select: none;
    display: flex;
    align-items: center;

}

.scroll {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-around;
}

.row {
    flex-direction: row;

}

.column {
    flex-direction: column;
}

/* 去除底部滚动条 */
/* .navBar::-webkit-scrollbar {
    display: none !important;
} */
/* // 设置滚动条的样式 */
/* ::-webkit-scrollbar {
    width: 10px;
    height: 30px;
    background-color: red;
} */

/* // 滚动条两端按钮 */
/* ::-webkit-scrollbar-button {
    display: none;
    background: green;
    border: 3px solid blue;
} */

/* ::-webkit-scrollbar-button:active {
    background: blue;
    border: 3px solid green;
} */

/* ::-webkit-scrollbar:hover {
    background-color: #eee;
} */

/* // 滚动槽外层轨道 */
/* ::-webkit-scrollbar-track {
    width: 5px;
    height: 5px;
    border-radius: 10px;
    background: teal;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(green, .1);
} */

/* // 内层滚动槽 */
/* ::-webkit-scrollbar-track-piece {
    background-color: rgba(skyblue, .3);
} */

/* // 滚动条滑块 */
/* ::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(yellow, .8);
    background: cyan;
    width: 30%;
} */

/* // 边角相交处 */
/* ::-webkit-scrollbar-corner {
    background-color: #000;
    border-radius: 50%;
} */

/* // 定义右下角拖动块样式 */
/* ::-webkit-resizer {} */


/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
    /* background-color: var(--scrollbar-track-color);  */
    background: rebeccapurple;
}

::-webkit-scrollbar-thumb {
    /* background-color: var(--scrollbar-thumb-color); */
    background: red;
    width: var(--scrollbar-thumb-width);
    height: var(--scrollbar-thumb-height);
    border-radius: 5px;
}
</style>