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

因为要做一个无缝滚动的判断，在这里我用到了vue-seamless-scroll，然后因为琢磨这个，我在坑底白白蹲了一天，到了现在忽然茅塞顿开，才把问题解决，也是心累了。

1、安装

npm install vue-seamless-scroll --save

2、配置

全局配置，在main.js中

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

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,
          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、autoplay手动设置

有的时候，当内容不超出外层容器高度时，不需要滚动，这个时候就需要获取装载数据的内部容器的高度，然后通过高度对比来判断autoplay的值，使用方法如下

<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:{
    classOption() {
        if(this.heightIntroduce<160){//对高度进行判断
          return {
            step:0,
            limitMoveNum:1,
            hoverStop:true,
            autoPlay: false
          }
        }else {
          return {
            step:0.5,
            limitMoveNum:1,
            hoverStop:true,
            autoPlay: true
          }
        }
    }
  },
  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里面计算它的高度
    }
  },
    mounted(){
      this.heights()  //在mounted里面调取获取高度的方法
    }
}
</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>

通过这几处的获取、赋值并判断，从而可以选择性的控制autoplay的值，提高了它的灵活性

后续

在使用vue-seamless-scroll的过程中，因为要控制autoplay的值，为了获取this.heightIntroduce的值，我翻过vue-seamless-scroll的源码，发现这里面获取高度用的offsetHeight，结果怎么都获取不到高度，期间调试过各种方法也是只能获取高度不能控制autoplay的值，也是心酸了！希望我这里能给大家一个demo参考了