列表滚动的实现方式

滚动分横向和纵向

手动滚动和自动滚动

自动滚动

1.通过transform位移和transition进行一个动画效果

 通过transform:translate(x轴位移距离,y轴位移距离);

再通过transition进行一个简单的动画效果

2.通过第三方的组件库 

      vue2使用vue-seamless-scroll

1.安装相关依赖

npm install vue-seamless-scroll --save

2.全局引入组件

import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)

3.组件使用

<template>
  //这里写的行内样式，需要时自己补充
  <vue-seamless-scroll
        class="scroll_box"
        :data="dataList"
        :class-option="defineScroll"
        style="
          height: 100%;
          overflow: hidden;
          width: 100%;
          color: white;
          font-size: 18px;
          text-align: center;
        "
      >
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            style="padding: 10px 0; margin: 5px"
          >
            <span class="name">{{ item.name }}</span>
            <span class="Etiology">{{ item.Etiology }}</span>
            <span class="status">{{ item.status }}</span>
            <span class="time">{{ item.time }}</span>
          </li>
        </ul>
   </vue-seamless-scroll>
</template>
 
data() {
    return {
      dataList: [
        {
          time: "XXXXXXXXX",
          name: "XX",
          Etiology: "XX",
          status: "XXX",
        },
        ......
      ],
    };
  },
  //定义计算属性，默认执行一次（监听，类似于data概念）；
  computed: {
    defineScroll() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },

vue3则使用vue3-seamless-scroll

4.使用数组的增加和删除,但此方法无动画效果.