因为要做一个无缝滚动的判断，在这里我用到了vue-seamless-scroll，但是因为要加一些判断，所以对它进行了一些改动，在求助之后才把问题解决，也是心累了。

1、安装

npm install vue-seamless-scroll --save

2、配置

2-1 全局配置

在main.js中，正常配置是：

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

由于原来的vue-seamless-scroll里面的功能满足不了如何根据容器的高度来判断什么时候滚动，所以对组件有改动，这里在main.js里面需要重新配置,这里引入的是vue-seamless-scroll/src里面的myClass，使用方法跟之前的一样，

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

2-2 局部配置

引入

使用

设置

2-3 局部修改

myClass.vue里面改动的地方为moveSwitch()

改动前：根据数据长度来判断

改动后：根据外层容器高度来判断

3、使用

<template>
  <div class="router1">
    <div class="flex wd800">
      <div class="options" style="color:#357edd;">
        <p>
          <b>demo1</b> 向上无缝滚动,hover可停止</p>
        var option = {<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step: 0.5,<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;limitMoveNum: 1<br/> }
      </div>
      <div>
        <vue-seamless-scroll :data="listData" class="warp"  :class-option="classOption">
          <ul class="item" ref="listItem">
            <li target="_blank" href="http://www.baidu.com" v-for="item in listData" style="width: 300px;">
              <span class="title" v-html="item.value" style="display: block"></span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
  import {apiGet} from "../../api/api";
  export default {
    data () {
      return {
        listItemHeight:"",
        listData: [],
      }
    },
    props: {},
    computed: {
      classOption () {
        return {
          step: 0.5,
          limitMoveNum: 1,//这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
          openTouch: false,
        }
      }
    },
    created(){
        this.getData()
    },
    methods: {
      getData(){
        let url='api/mock/trueExam.do?id=154167029200312001515'
        apiGet(this,url).then(res=>{
          console.log(res);
          let data=res
          let arr=[]
          data.forEach(item=>{
            arr.push({
              value:item.content
            })
          })
          console.log(arr)
          this.listData=arr
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .options {
    width: 300px;
    font-size: 15px;
    margin-right: 60px;
    p {
      color: #000;
      margin-bottom: 30px;
      b {
        font-size: 16px;
        font-style: italic;
      }
    }
  }
  .clearfix {
    zoom: 1;
    &:after {
      display: block;
      height: 0;
      clear: both;
      content: '.';
      visibillity: hidden;
    }
  }
  .wd800 {
    width: 800px;
    margin: 30px auto;
  }

  .warp {
    height: 260px;
    width: 360px;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li{
        display: block;
        /*height: 30px;*/
        line-height: 1.5;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }

  @media screen and (max-width: 770px) {
    .warp {
      width: 90%;
      margin: 0 auto;
    }
    body {
      background-color: lightblue;
    }
    .wd800 {
      width: 100%;
    }
    .flex.wd800 {
      display: block;
    }
    .options {
      width: 90%;
      margin: 20px auto;
      p {
        margin-bottom: 0;
      }
    }
  }
</style>

这个是基本的使用，相关的配置参数介绍如下

4、个别特殊配置项说明

4-1、moveSwitch()修改后的使用

<template>
 <div class="wrappers">
   <vue-seamless-scroll :data="listData" class="seamless-warp"  :class-option="classOption">
     <ul class="item" id="itemIntroduce">
       <li v-for="item in listData" style="width: 500px;">
        <span class="date" v-html="item.value"></span>
       </li>
     </ul>
   </vue-seamless-scroll>
 </div>
</template>
<script>
  import {apiGet} from "../../api/api";
  export default {
  name: 'scroll',
  data () {
    return {
      listData:[],
      heightIntroduce:'',
      flag:true,
    }
  },
  computed:{
          return {
            step:0,
            limitMoveNum:160,//这里的limitMoveNum指的是修改后的参数，是容器的高度
            hoverStop:true,
            autoPlay: false
          }
  },
  created(){
    this.getData()
  },
  methods:{
      getData(){
        let url='api/mock/trueExam.do?id=153984565046212001305'
        // let url='api/mock/trueExam.do?id=154167029200312001515'
        apiGet(this,url).then(res=>{
          let data=res
          let arr=[]
          data.forEach(item=>{
            arr.push({
              value:item.content
            })
          })
          this.listData=arr
        })
      },
    heights(){
        let $itemIntroduce=document.getElementById("itemIntroduce") //获取内部容器的高度
        this.heightIntroduce=$itemIntroduce.clientHeight//将内部容器高度赋值，
//然后在computed里面计算它的高度，计算宽度可以用clientWidth
    }
  },
  mounted(){
      this.getData() //获取数据在created里面调一次，在mounted里面更新一次
  },
  updated(){
      this.heights()  //在updated里面调取获取高度的方法
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .wrappers{
    background: #ddd;
    .seamless-warp{
      width: 500px;
      height: 160px;
      overflow: hidden;
      span{
        display: block;
        line-height: 1.5;
        font-size: 20px;
      }
    }
  }
</style>

4-2 修改后的配置

这个是修改后的使用，修改的配置参数介绍如下

4-3 重要的事说三遍