vue实现列表自动滚动、向上滚动的效果

• 推荐使用vue插件：vue-seamless-scroll
• 个人使用的感受就是，棒极了！
• 简单、方便、银杏
• 看一下效果图：
  

使用起来肥肠滴方便，设计非常银杏，下面我给老铁演示一下

第一步：安装

cnpm install vue-seamless-scroll --save

第二步：在main.js中引入

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

第三步：使用

<template>
  <div class="home_bottom_big">
      <el-tabs v-loading="loadingAdd">
        <el-tab-pane label="实时事件">
          <ul class="item">
            <li class="li_title">
              <span class="li_sjmc">事件标题</span
              ><span class="li_fssjStr">发生时间</span
              ><span class="li_zrdwname">责任单位</span
              ><span class="li_caseStateStr">处置情况</span
              ><span class="li_sjLevelStr">事件等级</span>
            </li>
             <vue-seamless-scroll
              :data="tableData"
              class="seamless-warp"
              :class-option="optionSetting"
            >
              <li
                class="li_item"
                v-for="item in tableData"
                :key="item.sjbh"
                @click="tabs(item)"
              >
                <span class="li_sjmc" v-text="item.sjmc"></span
                ><span class="li_fssjStr" v-text="item.fssjStr"></span>
                <span class="li_zrdwname" v-text="item.zrdwname"></span
                ><span
                  class="li_caseStateStr"
                  v-text="item.caseStateStr"
                ></span>
                <span class="li_sjLevelStr" v-text="item.sjLevelStr"></span>
              </li>
 			</vue-seamless-scroll>
          </ul>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import { queryCase } from "@/api/home";
export default {
  data() {
    return {
      tableData: [],
      loadingAdd :false
    };
  },
  methods: {
    //获取实时事件数据
    gettableData() {
      this.loadingAdd = true;
      queryCase().then((res) => {
        this.tableData = res.data;
        this.loadingAdd = false;
      });
    },
  },
  computed: {
    optionSetting() {
      return {
        step: 0.15, // 数值越大速度滚动越快
        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)
      };
    },
  },
  mounted() {
    this.gettableData();
  },
};
</script>

如果不太明白的话可以在【在线演示文档】进行深入学习