【Vue插件】Vue-seamless-scroll 无限滚动插件

1. 安装

npm install vue-seamless-scroll --save

2. 引入

3. 具体使用

<template>
  <div>
    <div>
      <h3>Vue-seamless-scroll(无限滚动)</h3>
      <div class="scroll-table">
        <span class="scroll-title">电话簿</span>
        <div class="table-head">
          <ul>
            <li>
            <span>姓名</span>
            <span>电话</span>
            </li>
          </ul>
        </div>
        <vue-seamless-scroll class="scroll-table-body" v-if="listData.length>0" :data="listData" :class-option="defaultOption">
          <ul class="scroll-ul">
            <li v-for="(item,index) in listData" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.phone}}</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
  // 无限滚动
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    name: 'PhotoDisplay',
    //import 引入组件
    components: {
      vueSeamlessScroll
    },
    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)
        }
      }
    },
    data() {
      return {
        // 数字滚动
        startVal: this.$store.state.count,
        endVal: this.$store.getters.doneDoCount,
        // 无限滚动
        listData: [
          {name: '张三', phone: 13047561910},
          {name: '王五', phone: 13214511215},
          {name: '赵六', phone: 14211312454},
          {name: '李逵', phone: 18012453215},
          {name: '马超', phone: 17712456321},
          {name: '关羽', phone: 15021453699},
        ],
      }
    },
    methods: {
    },
    mounted() {
    },
  }
</script>
<style scoped lang="less">
// 无限滚动
.scroll-table {
  width: 500px;
  height: 260px;
  margin: 0 auto;
  background-color: #242455;
  color:#48b4ff;
  .scroll-title {
    border-left: 5px solid red;
  }
  .table-head {
    width: 100%;
    ul{
      display: flex;
      flex-direction: row;
      list-style: none;
      margin-left: 38px;
    span {
      margin-right: 130px;
    }
    }
  }
  .scroll-table-body {
    height: calc(100% - 80px);
    overflow: hidden;
    ul {
    list-style: none;
    li {
      height: 30px;
      margin-top: 5px;
      span {
        margin-right: 130px;
      }
    }
    }
  }
}

</style>

4. 最终效果