vue列表自动滚动实例

npm install vue-seamless-scroll --save

import vueSeamlessScroll from "vue-seamless-scroll";

<vueSeamlessScroll
   :data="vehicleRecordListData"
   class="seamless-warp"
   :class-option="defaultOption"
 >
   <ul class="item">
      <li
           v-for="(item, index) in vehicleRecordListData"
           :key="index"
        >
                        <span class="title" v-text="item.inAutoPlate"></span>
                        <span class="date" v-text="item.vehicleCategory"></span>
                        <span class="date" v-text="item.isInOrOut"></span>
                        <span>{{ item.inOrOutTime | dateFormatValue }}</span>
                        <span>{{ item.inOrOutType }}</span>
                        <span>{{ item.inOrOutLaneName }}</span>
                      </li>
                    </ul>
                  </vueSeamlessScroll>

<template>
  <div class="scroll-container" id="scrollContainer">
    <Scroll :id="'service'">
      <template>
        <!-- <div v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
          {{item.name}}
        </div> -->
        <ul>
          <li v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
            <div class="service-chaild">{{ item.name }}</div>
            <div class="service-chaild">{{ item.value }}</div>
          </li>
        </ul>
      </template>
    </Scroll>
  </div>
</template>
<script>
  import Scroll from "@/components/HelloWorld";
  export default {
    name: 'TestPage',
    components: {
      Scroll
    },
    data() {
      return {
        scrollListData: [{
            name: '嘉兴',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '苏州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          },
          {
            name: '嘉兴',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '苏州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          },
          {
            name: '嘉兴',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '苏州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          }
        ]
      };
    },
    methods: {
      rowClick(row) {
        console.log(row, 'row ==================')
      }
    },
  };
</script>
<style>
  .scroll-container {
    height: 200px;
    width: 200px;
    margin-bottom: 20px;
  }
  .service {
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    display: flex;
  }
  .service:nth-child(odd) {
    background: yellow;
  }
  .service:nth-child(even) {
    background: orange;
  }
  .service-chaild {
    height: 50px;
  }
</style>

<template>
  <div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ScrollList',
    props: {
      id: String
    },
    data() {
      return {
        timer: null
      };
    },
    methods: {
      init() {
        this.setTimer();
        // this.$once代表只执行一次。如果组件是在keep-alive中包裹，则需要更换函数
        // 被keep-alive包裹住的组件有两个生命周期函数：activated和deactivated
        this.$once('hook:beforeDestroy', () => {
          this.removeTimer();
        });
      },
      removeTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      setTimer() {
        this.removeTimer();
        this.timer = setInterval(() => {
          // pixel height：include el and padding    read only
          const scrollHeight = document.getElementById(this.id).scrollHeight;
          // visible area height：include el and padding  read only
          const clientHeight = document.getElementById(this.id).clientHeight;
          const heightDifference = scrollHeight - clientHeight;
          // scroll height：readable and writable
          document.getElementById(this.id).scrollTop++;
          // when el scroll to top
          if (document.getElementById(this.id).scrollTop >= heightDifference - 1) {
            this.removeTimer();
            // make it go back to original location after one second
            setTimeout(() => {
              document.getElementById(this.id).scrollTop = 0;
              this.setTimer();
            }, 1000);
          }
        }, 44);
      },
      monseenter() {
        this.removeTimer();
      },
      mouseleave() {
        this.setTimer();
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
<style>
  .scrollContainer::-webkit-scrollbar {
    width: 4px;
    background: aliceblue;
  }
  .scrollContainer::-webkit-scrollbar-thumb {
    background: palevioletred;
    border-radius: 5px;
  }
  .scrollContainer {
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
  }
  /* // 兼容IE */
  .scrollContainer {
    /*三角箭头的颜色*/
    scrollbar-arrow-color: #fff;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: #0099dd;
    /*滚动条整体颜色*/
    scrollbar-highlight-color: #0099dd;
    /*滚动条阴影*/
    scrollbar-shadow-color: #0099dd;
    /*滚动条轨道颜色*/
    scrollbar-track-color: #0066ff;
    /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
    scrollbar-3dlight-color: #0099dd;
    /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
    scrollbar-darkshadow-color: #0099dd;
    /*滚动条基准颜色*/
    scrollbar-base-color: #0099dd;
  }
</style>