滑动自定义指令

效果图：

代码（template）：

<template>
  <div class="scrollAnimation">
    <ul v-scroll-height height="3" speed1='1000' speed2='500' isEnd="true" >
      <li
        class="list_item"
        :class="{ bg: index == current }"
        v-for="(item, index) in items"
        :key="item.id"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  directives: {},
  data() {
    return {
      items: [],
      current: 0,
      timer: null,
      show: true,
      parentHeight: "",
      childHeight: "",
      totalPage: "",
      // rotationTime: {
      //   //  轮播的时间
      //   time: 10000, //  轮播间隔时间
      //   leaveAndGoTime: 3000, // 鼠标进入后离开，轮播的间隔时间
      //   animateTime: 1000, // 动画时间
      // },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
  
  },
  watch: {
    
  },
};
</script>

<style lang="less" scoped>
.scrollAnimation {
  width: 200px;
  background-color: red;
  overflow-y: auto;
  position: relative;
  ul {
    position: relative;
    left: 0;
    top: 0;
    height: 100px;
    overflow-y: auto;
    li {
      font-size: 18px;
      // color: #cccc;
      background-color: #cccc;
      margin-bottom: 5px;
      line-height: 20px;
      height: 20px;
    }
    .bg {
      color: red;
    }
  }
}
</style>

指令代码

import Vue from "vue";
Vue.directive('scroll-height', {
    // el：指令所绑定的元素，可以用来直接操作 DOM。
    //binding：一个对象，包含以下 property：
    bind(el, binding, vnode) {
        let time = null;
        let scrollTime = null;
        let speed = 1000;
        let current = 0;

        let self = vnode.context;
        let $el = $(el);


        let myHeigth = $el.attr("height") ? $el.attr("height") : '';
        let tag = $el.attr("Tag") ? $el.attr("Tag") : 'li';
        let isEnd = $el.attr("isEnd")==true ? true : false;
        let speed1 = $el.attr("speed1") ? $el.attr("speed1") : 1000;
        let speed2= $el.attr("speed2") ? String($el.attr("speed2")) : 500;

        self.$nextTick(() => {
            // 1.首先，几行可以滑动
            let maxHeight = 0;
            let chrLength = $el.find(tag).length;
            for (let i = 0; i < myHeigth; i++) {
                maxHeight += $el.find(tag).eq(i).outerHeight(true)
            }
            $el.css({
                height: maxHeight
            });
            $el.css({
                overflowY: 'auto'
            });

            // 定时滚动
            function autoPlay() {
                clearInterval(time)
                time = setInterval(animation, speed1)
            }
			// 移动
            function animation() {
                let end = isEnd ? myHeigth : 0
                if (current < self.items.length-1 ) {
                    current++
                } else {
                    current = 0
                }
                self.current = current

                let offsetTop = $el.find(tag).eq(current).outerHeight(true)
                $el.stop(false, true).animate({
                    scrollTop: `${current *offsetTop}px`,
                }, speed2)
            }
			//鼠标进入
            function bindMouseEnter() {
                clearInterval(time)
                clearInterval(scrollTime)
            }
			// 鼠标离开
            function bindMouseLeave() {
                scrollTime = setTimeout(() => {
                    autoPlay();
                    animation();
                }, 1000);
            }

            autoPlay();
            el.addEventListener(
                "mouseenter",
                bindMouseEnter
            );
            el.addEventListener(
                "mouseleave",
                bindMouseLeave
            );
        })

    },
    inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
    },
    update(el, binding) {

    }
})

在全局全局即可（main.js）