vue 列表无限滚动列表，循环完自动切换tab

记录一下大屏常用的滚动组件 vue-seamless-scroll  以及滚动完自动切换tab效果。

1.下载vue-seamless-scroll插件

npm install vue-seamless-scroll --save

2.页面使用

<vueSeamlessScroll @ScrollEnd="changeScroll" :data="nowlist" :class-option="defaultOption" class="fxsfdw_list">
        <div v-for="(item, index) in nowlist" :key="index">
          <div class="ttflex">
            <div class="items w1">{{ item.name }}</div>
            <div class="items w2">{{ item.age }}</div>
            <div class="items w3">{{ item.class }}</div>
          </div>
        </div>
        //循环完一次增加间隔
        <div style="height: 20px;"></div>
</vueSeamlessScroll>
<script>
import vueSeamlessScroll from "vue-seamless-scroll"
export default {
  components: {
    vueSeamlessScroll
  },
}
</script>

3.监听列表滚动完毕执行定时任务

需要用到插件的一个方法 @ScrollEnd 官网没有介绍，这个方法是列表滚动完毕一次就会执行。

  methods: {
    jumptype() {
      clearTimeout(this.timeOut)
      this.active = this.active + 1
      console.log(this.active);
      if (this.active == 3) {
        this.active = 0
        this.nowlist = this.userInfo.list1
      } else if (this.active == 1) {
        this.nowlist = this.userInfo.list2
      } else if (this.active == 2) {
        this.nowlist = this.userInfo.list3
      }
      if (this.nowlist.length < 4) {
        this.timeOut = setTimeout(() => {
          this.jumptype()
        }, 3000);
      }
    }, 
    //监听列表滚动完毕
    changeScroll() {
      if (this.nowlist.length) {
          this.jumptype()
      }
    }
  },

4.完整测试代码

注意滚动列表最好要定义高度，高度与你设置limitMoveNum 属性相关联否则列表滚动会有间隔！

<template>
  <div>
    <div class="tit_flex">
      <div class="tit_item" :class="active == index ? 'activeitem' : ''" v-for="(item, index) in classList" :key="index"
        @click="changeType(item, index)">
        {{ item.name }}
      </div>
    </div>
    <div class="content">
      <div class="tflex">
        <div class="items w1">姓名</div>
        <div class="items w2">年龄</div>
        <div class="items w3">班级</div>
      </div>
      <!-- 注意滚动列表最好要定义高度，高度与你设置limitMoveNum 属性相关联否则列表滚动会有间隔  !!!!!-->
      <vueSeamlessScroll @ScrollEnd="changeScroll" :data="nowlist" :class-option="defaultOption" class="fxsfdw_list">
        <div v-for="(item, index) in nowlist" :key="index">
          <div class="ttflex">
            <div class="items w1">{{ item.name }}</div>
            <div class="items w2">{{ item.age }}</div>
            <div class="items w3">{{ item.class }}</div>
          </div>
        </div>
        <div style="height: 20px;"></div>
      </vueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll"
export default {
  components: {
    vueSeamlessScroll
  },
  name: 'TestSa',
  data() {
    return {
      classList: [
        {
          id: 1,
          name: '一班'
        },
        {
          id: 2,
          name: '二班'
        },
        {
          id: 3,
          name: '三班'
        }
      ],
      active: 0,
      userInfo: {
        list1: [
          {
            name: '张三',
            age: 20,
            class: '一班'
          },
          {
            name: '张三',
            age: 120,
            class: '一班'
          },
          {
            name: '李四',
            age: 9,
            class: '一班'
          },
          {
            name: '王五',
            age: 1,
            class: '一班'
          },
          {
            name: '二狗',
            age: 22,
            class: '一班'
          },
          {
            name: '阿萨德',
            age: 20,
            class: '一班'
          }
        ],
        list2: [
          {
            name: '张三',
            age: 20,
            class: '二班'
          },
          {
            name: '张三',
            age: 120,
            class: '二班'
          },
          {
            name: '李四',
            age: 9,
            class: '二班'
          },
          {
            name: '王五',
            age: 1,
            class: '二班'
          },
          {
            name: '二狗',
            age: 22,
            class: '二班'
          },
          {
            name: '阿萨德',
            age: 20,
            class: '二班'
          }
        ],
        list3: [
          {
            name: '张三',
            age: 20,
            class: '三班'
          },
          {
            name: '张三',
            age: 120,
            class: '三班'
          },
          {
            name: '李四',
            age: 9,
            class: '三班'
          },
          {
            name: '王五',
            age: 1,
            class: '三班'
          },
          {
            name: '二狗',
            age: 22,
            class: '三班'
          },
          {
            name: '阿萨德',
            age: 20,
            class: '三班'
          }
        ]
      },
      nowlist: [],
      timeOut: null
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        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)
        limitMoveNum: 4 // 多少条开始滚动
      }
    },
  },
  mounted() {
    this.nowlist = this.userInfo.list1

  },
  methods: {
    changeType(item, index) {
      console.log(item, index);
      this.active = index
      if (index == 0) {
        this.nowlist = this.userInfo.list1
      } else if (index == 1) {
        this.nowlist = this.userInfo.list2
      } else {
        this.nowlist = this.userInfo.list3
      }

    },
    jumptype() {
      clearTimeout(this.timeOut)
      this.active = this.active + 1
      console.log(this.active);
      if (this.active == 3) {
        this.active = 0
        this.nowlist = this.userInfo.list1
      } else if (this.active == 1) {
        this.nowlist = this.userInfo.list2
      } else if (this.active == 2) {
        this.nowlist = this.userInfo.list3
      }
      if (this.nowlist.length < 4) {
        this.timeOut = setTimeout(() => {
          this.jumptype()
        }, 3000);
      }
    },
    changeScroll() {
      if (this.nowlist.length) {
          this.jumptype()
      }
    }
  },
}
</script>
<style scoped>
.tit_flex {
  width: 300px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  height: 38px;
  align-items: center;
}

.tit_item {
  width: 30%;
  cursor: pointer;
}

.activeitem {
  color: red;
}

.content {
  width: 300px;
  border: 1px solid #eee;
}

.tflex {
  display: flex;
  justify-content: space-between;
  background: #eee;
}

.tflex .items {}

.w1 {
  width: 30%;
}

.w2 {
  width: 30%;
}

.w3 {
  width: 30%;
}

.fxsfdw_list {
  overflow: hidden;
  height: 200px;
}

.ttflex {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
}
</style>