制作列表无缝滚动 vue-seamless-scroll

安装

npm install vue-seamless-scroll --save

在main.js文件里引用

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

在组件中使用

<template>
  <div class="result">
    <div class="return-home" @click="returnHome"></div>
    <div class="scroll-container">
      <div class="result-head">
        <span class="result-name">名字</span>
        <span class="result-prize">奖品</span>
      </div>
      <div class="" @click="stopScroll">
        <vue-seamless-scroll
          :data="listData"
          :class-option="optionHover"
          class="seamless-warp"
        >
          <div class="item" ref="nameList">
            <div
              class="list-item"
              v-for="(item, index) in listData"
              :key="index"
            >
              <span class="name" v-text="item.name"></span>
              <span class="prize" v-text="item.prize"></span>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

组件内js

export default {
  data() {
    return {
      step: 0,
      //
      listData: [
        {
          name: "张小生1",
          prize: "联想ThinkPad 翼480联想ThinkPad 翼480联想ThinkPad 翼480",
        },
        {
          name: "张小生2",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生3",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生4",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生5",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生6",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生10",
          prize: "联想ThinkPad 翼480联想ThinkPad 翼480联想ThinkPad 翼480",
        },
        {
          name: "张小生20",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生30",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生40",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生11",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生12",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生111",
          prize: "联想ThinkPad 翼480",
        },
        {
          name: "张小生121",
          prize: "联想ThinkPad 翼480",
        },
      ],
    };
  },
  computed: {
    optionHover() {
      return {
        step: this.step, // 数值越大速度滚动越快
        limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
        isSingleRemUnit: true, //是否开启rem度量
      };
    },
  },
  mounted() {},
  methods: {
    returnHome() {
      this.$router.replace({ path: "/" });
    },
    stopScroll() {
      if (this.step == 0) {
        this.step = 0.28;
      } else {
        this.step = 0;
      }
    },
  },
};

组件内样式less

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.result {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("../../static/images/p3/bg_3.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .return-home {
    position: absolute;
    top: 30rem;
    right: 20rem;
    width: 89rem;
    height: 29rem;
    background: url("../../static/images/p2/btn_3.png") no-repeat;
    background-size: 100% 100%;
  }

  .scroll-container {
    width: 700rem;
    height: 582rem;
    margin: 50rem auto 0;
    font-size: 24rem;
    color: #fff;
    .result-head {
      width: 100%;
      height: 28rem;
      margin-bottom: 20rem;
      display: flex;
      justify-content: flex-start;
      font-size: 24rem;
      color: #fff;
      .result-name {
        width: 180rem;
        white-space: nowrap;
      }
      .result-prize {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .seamless-warp {
      height: 480rem;
      overflow: hidden;
    }
    .list-item {
      width: 100%;
      height: 40rem;
      display: flex;
      justify-content: flex-start;
      .name {
        width: 180rem;
        white-space: nowrap;
      }
      .prize {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}