史上最全vue滚动列表组件（结合多种业务场景）-解决VueSeamlessScroll多个痛点问题

为什么使用它？

与VueSeamlessScroll 比较，解决VueSeamlessScroll 多个痛点问题

1.VueSeamlessScroll 无缝滚动点击事件不生效
2.VueSeamlessScroll 不兼容滚动至最后一条返回第一条

它有什么功能？

• 具备VueSeamlessScroll的无缝滚动功能（设置滚动速度）
• 可选择无缝滚动或滚动至最后一条时返回首条从头滚动
• 可任意选择一项进行选中、选中了页面停止滚动
• 可选择滚轮滚动功能（设置滚轮滚动的步数）
• 可选择是否显示滚动条，直观显示滚动到哪一步

怎么使用它？

npm install vue-scrolling

main.js

import vueScrolling from "vue-scrolling";
Vue.use(vueScrolling);

任意页面

//页面若反复更改data 绑定key
 <vue-scrolling  :data="data" :key="updateKey">
      <div
        v-for="(item, index) in data"
        :key="index"
         >
          "你的滚动代码~"
       </div>
    </div>
 </vue-scrolling>

主要参数配置

参数	解释	默认
steep	滚动步数	1
intervalTime	滚动速度	30
scrollDirection	滚动方向	top
isRoller	是否可以滑轮滚动	top
isShowSrcroll	是否显示滚动条	false
isSelectStop	是否选中	false
isTurnUp	是否底部后回到首条（false 为无缝滚动）	true
rollerScrollDistance	滑轮滚动的距离	8
data	数据源	[]

具体使用手册Demo

无缝滚动实例（只滚动）

<template>
  <div
    class="scroll-list"
    ref="scrollList"
  >
    //无缝滚动建议取消滚轮滚动 isRoller传值为false
    <wk-scrolling
      :style="{ height: scrollHeight }"
      :data="data"
      :key="updateKey"
      :isRoller="false"
      :isTurnUp="false"
    >
      <div class="scroll-list_body">
        <div
          class="scroll-list_body__item"
          v-for="(item, index) in data"
          :key="index"
        >
          <div class="label">
            <span> 我是第{{ item.index }}条滚动数据哟</span>
          </div>
        </div>
      </div>
    </wk-scroll>
  </div>
</template>

<script>
export default {
  name: "scroll-list",
  data() {
    return {
      scrollHeight: 0,
      updateKey: 0,
      data:[{...你的数据}]
    };
  },
  watch: {
    data() {
      this.updateKey++;
    },
  },

  mounted() {
    const scrollHeight = this.$refs["scrollList"].clientHeight;
    if (scrollHeight) {
      this.scrollHeight = `${scrollHeight}px`;
    }
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.scroll-list {
  height: 100%;
  overflow: hidden;
  &_body {
    &__item {
      display: flex;
      align-items: center;
      height: 20px;
      margin: 20px;
      padding: 5px;
      position: relative;
      cursor: pointer;
      background: pink;
    }
  }
}
</style>

无缝滚动实例（可选中）

<template>
  <div
    class="scroll-list"
    ref="scrollList"
  >
    <wk-scroll
      ref="seamlessScroll"
      :data="data"
      :style="{ height: scrollHeight }"
      :key="updateKey"
      :isRoller="false"
      :isTurnUp="false"
      :isSelectStop="isSelectStop"
    >
      <div class="scroll-list_body">
        <div
          class="scroll-list_body__item"
          v-for="(item, index) in data"
          :key="index"
          :style="{ backgroundColor: item.index === activeIndex ? 'yellow' : '' }"
          @click="onSelect(item)"
        >
          <div class="label">
            <span> 我是第{{ item.index }}条滚动数据哟</span>
          </div>
        </div>
      </div>
    </wk-scroll>
  </div>
</template>

<script>
export default {
  name: "scroll-list",
  data() {
    return {
      scrollHeight: 0,
      activeIndex: undefined,
      isSelectStop: false,
      updateKey: 0,
      data:[{...你的数据}]
    };
  },
  watch: {
    data() {
      this.activeIndex = undefined;
      this.isSelectStop = false;
      this.updateKey++;
    },
  },

  mounted() {
    const scrollHeight = this.$refs["scrollList"].clientHeight;
    if (scrollHeight) {
      this.scrollHeight = `${scrollHeight}px`;
    }
  },
  methods: {
    onSelect(data) {
      this.$refs.seamlessScroll.stop(); //停止滚动
      this.isSelectStop = true; //已选中
      this.activeIndex = data.index;
    },
  },
};
</script>

<style lang="less" scoped>
.scroll-list {
  height: 100%;
  overflow: hidden;
  &_body {
    &__item {
      display: flex;
      align-items: center;
      height: 20px;
      margin: 20px;
      padding: 5px;
      position: relative;
      cursor: pointer;
      background: pink;
    }
  }
}
</style>

滚动至底部后返回首条（显示滚动条）

<template>
  <div
    class="scroll-list"
    ref="scrollList"
  >
    <wk-scroll
      :data="data"
      :style="{ height: scrollHeight }"
      :key="updateKey"
      :isShowSrcroll="true"
    >
      <div class="scroll-list_body">
        <div
          class="scroll-list_body__item"
          v-for="(item, index) in data"
          :key="index"
        >
          <div class="label">
            <span> 我是第{{ item.index }}条滚动数据哟</span>
          </div>
        </div>
      </div>
    </wk-scroll>
  </div>
</template>

<script>
export default {
  name: "scroll-list",
  data() {
    return {
      scrollHeight: 0,
      updateKey: 0,
      data:[{...你的数据}]
    };
  },
  watch: {
    data() {
      this.activeIndex = undefined;
      this.isSelectStop = false;
      this.updateKey++;
    },
  },

  mounted() {
    const scrollHeight = this.$refs["scrollList"].clientHeight;
    if (scrollHeight) {
      this.scrollHeight = `${scrollHeight}px`;
    }
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.scroll-list {
  height: 100%;
  overflow: hidden;
  &_body {
    &__item {
      display: flex;
      align-items: center;
      height: 20px;
      margin: 20px;
      padding: 5px;
      position: relative;
      cursor: pointer;
      background: pink;
    }
  }
}
</style>