vue2中实现列表垂直滚动

由于近期公司项目需要做大屏开发 需要用到垂直滚动 先写一下示例代码 后期在进行优化

先上代码子组件

在这里插入代码片<template>
  <div class="project">
    <div class="scroll">
      <div
        :class="len === 1 ? 'item_list' : 'item_list am'"
        :style="{ top: top }"
      >
        <div
          class="item"
          v-for="(item, index) in dataList"
          :key="index"
          @mouseleave="move"
          @mouseenter="seup"
          @mousemove="moves"
        >
          我的{{ item.name }} 点赞{{ item.id }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
function throttle(time, fn) {
  let times = null
  return function () {
    let that = this
    let ars = arguments
    if (times) {
      clearTimeout(times)
    }
    times = setTimeout(() => {
      times = null
      fn.apply(that, ars)
    }, time)
  }
}
export default {
  name: 'itemlist',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      len: 1,
      time: null,
    }
  },
  computed: {
    dataList() {
      return JSON.parse(JSON.stringify(this.data))
    },
    top() {
      return -this.len * 45 + 'px'
    },
  },
  methods: {
    moves: throttle(1500, function () {
      this.setTop()
    }),
    move(e) {},
    seup(e) {},
    setTop() {},
    getScorll() {
      this.time = setInterval(() => {
        if (this.dataList.length - 1 > this.len) {
          this.len++
        } else {
          this.len = 1
        }
      }, 1500)
    },
  },
  mounted() {
    this.getScorll()
  },
}
</script>
<style lang="scss" scoped>
.project {
  padding: 15px;
  /* margin: 35px 15px; */
  background: #0000cd;
  height: 100%;
  display: flex;
}
.scroll {
  flex: 1;
  /* width: 100%; */
  height: 400px;
  overflow: auto;
  margin: 0 auto;
  border: 1px solid #fff;
  padding: 0 10px;
  position: relative;
  .item_list {
    position: absolute;
    top: -100px;
    width: 100%;
  }
  .am {
    transition: all ease-out 0.3s;
  }
  .item {
    height: 45px;
    line-height: 45px;
    font-size: 13px;
    color: #fff;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
  .item:hover {
    background: #eee;
    color: #19197d;
  }
}
</style>

父组件

在这里插入代码片
<template>
  <div class="project">
    <div style="width: 100%">
      <itemList :data="dataList"> </itemList>
    </div>
  </div>
</template>
<script>
import itemList from './component/itemlist.vue'
export default {
  components: {
    itemList,
  },
  name: 'list',
  data() {
    return {
      len: 1,
      time: null,
    }
  },
  computed: {
    dataList() {
      let list = []
      for (let index = 0; index < 30; index++) {
        list.push({ name: `${index}奥林老师`, id: index })
      }
      return list
    },
  },
  methods: {},
  mounted() {},
}
</script>
<style lang="scss" scoped>
.project {
  padding: 15px;
  /* margin: 35px 15px; */
  background: #0000cd;
  height: 100%;
  display: flex;
}
</style>

借鉴网友的无缝滚动

由于还在实例阶段 后期准备优化为无缝滚动
码云： https://gitee.com/db121/vue_admin
github: https://github.com/121066/vue-admin-pc