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

类似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"

原文地址：https://blog.csdn.net/weixin_46631078/article/details/140727577

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！