Vue 中通过vue-seamless-scroll实现无缝滚动列表

一、安装组件依赖

npm install vue-seamless-scroll --save

二、在需要使用的页面引入组件并注册

1.引入组件，并在components中注册

代码如下（示例）：

import vueSeamlessScroll from "vue-seamless-scroll";
components: { vueSeamlessScroll },

2.具体使用

代码如下（示例）：

<template>
 <div class="contentCenter_three">
          <div class="title">老师做过的项目名称</div>
          <div style="width:100%;height:100%;">
          <!--这部分为自定义表头部分--!>
            <div
              class="seamlessRolling"
              style="background: rgba(0, 0, 0, 0.01);width:100%;height:20%;color: #fff;"
            >
              <ul >
                <li style="background: rgba(0, 0, 0, 0.01);">
                  <span>{{ option.msgData_name.name }}</span>
                  <span>{{ option.msgData_name.title }}</span>
                </li>
              </ul>
            </div>
            <!--这部分为滚动列表部分--!>
            <div class="seamlessRolling" @click="lookClick($event)">
              <vue-seamless-scroll :data="option.msgData" :class-option="classOption">
                <ul>
                  <li v-for="(item, index) in option.msgData" :key="index">
                    <span>{{ item.itemName }}</span>
                    <span>{{ item.updateTime }}</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
</template>
 
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
 
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { vueSeamlessScroll },
  data() {
    // 这里存放数据
    return {
      option:{
      	//老师做过的项目start
        msgData_name: {
          name: '项目名称',
          title: '时间'
        },
        msgData: [
          {
            id: 1,
            name: 1,
            title: '无缝滚动001',
            time: '2023-12-11'
          },
          {
            id: 2,
            name: 2,
            title: '无缝滚动002',
            time: '2023-12-11'
          },
          {
            id: 3,
            name: 3,
            title: '无缝滚动003',
            time: '2023-12-11'
          },
          {
            id: 4,
            name: 4,
            title: '无缝滚动004',
            time: '2023-12-11'
          },
          {
            id: 5,
            name: 5,
            title: '无缝滚动005',
            time: '2023-12-11'
          }
        ],
      }
    };
  },
  // 计算属性 类似于data概念
  computed: {
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        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)
      };
    },
  },
 
  // 这里是方法集合
  methods: {
  },
 
  
};
</script>
 
<style lang='scss' >
//@import url(); 引入公共css类
</style>
<style lang='scss' scoped>
//@import url(); 引入公共css类
* {
  padding: 0;
  margin: 0;
}
.seamlessRolling {
  margin: 0 auto;
  width: 300px;
  height: 200px;
  border: 1px solid rgb(165, 76, 76);
  overflow: hidden;
  ul,
  li {
    list-style: none;
  }
  li {
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-around;
    .handle {
      cursor: pointer;
    }
  }
}
</style>

3.配置项说明

计算属性computeds中classOption为滚动属性的配置

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 vue-seamless-scroll的基本使用方法。