vue+ele爬坑之路（四）—vue-seamless-scroll

因为要做一个无缝滚动的判断，在这里我用到了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 局部配置

在不安装vue-seamless-scroll的情况下，直接在当前页面引入myClass.vue，我这里把myClass.vue改成了marquee.vue，使用方法为

引入

使用

设置

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>

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

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	是否自动播放使用switch切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean

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 修改后的配置

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

key	description	default	val
limitMoveNum	开启无缝滚动的高度	50	Number

4-3 重要的事说三遍

在参数配置中，如果使用autoplay属性，必须要在v-for的标签上加width属性,否则页面排版会有问题