vue结合 seamscorll.js实现自适应最大高度和滚动高度列表

seamless-scroll.js

// scrollList.vue
<!--li的高度需要固定，不要用margin撑/-->
<template>
  <div class="scroll-list" :style="{'max-height':maxHeight + 'px'}">
    <ul id="con1" ref="ul">
      <li v-for='item in value' :key="item.id" ref="element">
        <slot name="list" :item="item"></slot>
      </li>
    </ul>
  </div>
</template>
<script>
// npm install seamscroll --save 或 yar add seamscroll
const seamless = require('seamscroll')
export default {
  name: "scrollList",
  props:{
  	// 不要给默认值
    value:'', 
    // 几条开始滚动
    number:{
      type:Number,
      default:5
    }, 
    direction:{
      type:Number,
      default:1
    },
    singleWidth:{
      type:Number,
      default:0
    },
    waitTime:{
      type:Number,
      default:2000
    },
    step:{
      type:Number,
      default:1
    }
  },
  data(){
    return{
      maxHeight:0
    }
  },
  computed:{
  	// 动态获取一行的高度
    singleHeight(){
      let height = this.$refs['element'][0].offsetHeight
      // 获取最大高度
      this.maxHeight = height * this.number
      return height
    }
  },
  methods:{
    init(){
      let height = this.singleHeight
      if(this.value.length > this.number){
        seamless.init({
          dom: this.$refs['ul'], //	作用的dom
          step:this.step,//步长,越大越快
          direction: this.direction, //方向 0 往下 1 往上 2向左 3向右
          hoverStop:false, //是否启用鼠标hover控制
          singleHeight:height, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth:this.singleWidth, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime:this.waitTime, //单步停止等待时间(default 1s)
        })
      }
    }
  },
  mounted(){
    this.init()
  },
}
</script>

<style scoped lang="scss">
.scroll-list{
  background-color: inherit;
  border-radius: 0 0 10px 10px;
  //padding-bottom: 11px;
  overflow: hidden;
}
.anim{
  transition: all 1.5s;
}
</style>

使用方法

// 父组件使用
<scroll-list  :key="list.length" v-model="list" :number="5">
  <div slot="list" slot-scope="{ item }">
      你的列表    
  </div>
</scroll-list>