实现在v-for的Div里面列表循环滚动效果

引言

在Web开发中，列表循环滚动效果是一种常见的UI设计，尤其在展示新闻、公告或者商品列表时。Vue.js作为当前流行的前端框架，提供了灵活的方式来实现这种效果。本文将介绍两种在Vue中实现列表循环滚动的方法：一种是使用现成的插件vue-seamless-scroll，另一种则是通过纯JavaScript来实现。

方法一：使用vue-seamless-scroll插件

1. 下载和引入插件

首先，我们需要通过npm安装vue-seamless-scroll插件：

npm install vue-seamless-scroll --save

然后在Vue组件中引入并注册插件：

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  }
}

2. 使用插件实现滚动

在模板中，我们通过v-for指令循环渲染列表项，并使用vue-seamless-scroll组件包裹它们：

<vue-seamless-scroll :data="opsList" :class-option="defaultOption">
  <div v-for="(item, index) in opsList" :key="index" class="item justify-between">
    <span class="name">{{ item.processDefinitionName }}</span>
    <span class="time">{{ item.createTime }}</span>
  </div>
</vue-seamless-scroll>

3. 配置滚动选项

在组件的computed属性中，我们可以定义滚动的各种选项，如滚动速度、滚动方向等：

computed: {
  defaultOption() {
    return {
      step: 1,           // 数值越大速度滚动越快
      limitMoveNum: 2,   // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true,   // 是否开启鼠标悬停stop
      direction: 1,      // 0向下 1向上 2向左 3向右
      openWatch: true,   // 开启数据实时监控刷新dom
      singleHeight: 226, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0,    // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 6000,    // 单步运动停止的时间(默认值1000ms)
      scrollTime: 0,     // 单步运动的时间(默认值1000ms)
      scrollNum: 1,      // 单步运动的距离(默认值1)
      scrollType: 0,     // 0匀速 1缓动
    }
  },
}

方法二：纯JS实现滚动

1. 准备HTML结构

首先，我们需要一个包含v-for循环的div容器，用于展示列表项：

<div class="swiperlist">
  <div v-for="(item, index) in opsList" :key="index" class="item justify-between">
    <span class="name">{{ item.processDefinitionName }}</span>
    <span class="time">{{ item.createTime }}</span>
  </div>
</div>

2. 编写JavaScript逻辑

在组件的生命周期钩子中，我们编写获取数据和滚动列表的逻辑, 并且启动和停止滚动动画：

data() {
  return {
    opsList: [],
    animate: 0,
  }
},
mounted() {
  this.getOps()
},
methods: {
  // 获取表格数据
  getOps() {
    const obj = {
      currentPage: 1,
      pageSize: 20
    }
    getList(obj.currentPage, obj.pageSize,).then(res => {
      this.opsList = res.data.data.records
      this.scrollList()
    })
  },
  // 列表滚动
  scrollList() {
    const swiperList = document.getElementsByClassName("swiperlist");
    this.animate = setInterval(() => {
      for (let i = 0; i < swiperList.length; i++) {
        let maxtop = swiperList[i].scrollHeight - swiperList[i].offsetHeight;
        if (maxtop === 0) {
          continue;
        }
        swiperList[i].scrollTop += 1
        if (swiperList[i].scrollTop >= (maxtop - 1)) {
          swiperList[i].scrollTop = 0
        }
      }
    }, 80);
  },
},
deactivated() {
  clearInterval(this.animate)
},
beforeDestroy() {
  clearInterval(this.animate)
}  

3. 样式设置

最后，我们需要一些基本的CSS样式来确保滚动效果的展示：

.swiperlist {
  width: 100%;
  height: 290px;
  overflow: hidden scroll;
}
.justify-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  padding: 10px;
  border-top: 1px solid #f0f0f0;
}
.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time {
  width: 140px;
}

结语

通过上述两种方法，我们可以在Vue中轻松实现列表的循环滚动效果。第一种方法通过使用插件简化了实现过程，而第二种方法则提供了更多的自定义选项。开发者可以根据项目需求和个人喜好选择合适的实现方式。希望本文能帮助到需要实现此效果的开发者。