关于vue3中的vue-seamless-scroll三方包使用的注意事项与使用流程

 第一部分:使用前准备

第一步、下包安装

npm install vue-seamless-scroll --save

第二步、引入使用

• 局部引入：

1.导入.vue页面

import vueSeamlessScroll from "vue-seamless-scroll";

 2.注册组件

components: {
    vueSeamlessScroll,
},

•  全局main.js引入：

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

 第二部分:使用流程之组件代码

<!-- @format -->

<template>
  <div class="" style="padding: 50px">
      <div class="page-example3" style="">
          <vue-seamless-scroll :data="listData" :class-option="defaultOption">
              <ul class="ul-scoll">
                  <li v-for="(item, index) in listData" :key="index">
                      <span class="title">{
   
   { item.title }}：</span
                      ><span class="date">{
   
   { item.time }}</span>
                  </li>
              </ul>
          </vue-seamless-scroll>
      </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll/src';   //检查是否有src
export default {
  name: 'Example3',
  components: {
      vueSeamlessScroll
  },
  data() {
      // 这里存放数据
      return {
          listData: []
      };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        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: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      for (let i = 0; i < 15; i++) {
          let j = {
              title: '无缝滚动第几条啊啊啊-' + i,
              time: '2020-04-10'
          };
          this.listData.push(j);
      }
  }
};
</script>

<style scoped lang="scss">
//@import url(); 引入公共css类
.page-example3 {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid #283dff;
    .ul-scoll {
        li {
            margin: 6px;
            padding: 5px;
            background: rgba(198, 142, 226, 0.4);
        }
    }
}
</style>

第三部分:vue3.0使用vue-seamless-scroll报错问题

如果出现如下错误可能是导入方法有错

 据说vue2和vue3的导入方法可能路径上有些出入,居说在vue2中导入是没有问题的

vue2导入:

import vueSeamlessScroll from 'vue-seamless-scroll;

vue3导入

import vueSeamlessScroll from 'vue-seamless-scroll/src';

我在vue3导入路径加上src后能正常显示列表并滚动。