vue实现循环滚动列表-vue-seamless-scroll

 本文章使用 vue-seamless-scroll 为大家分享了vue实现循环滚动列表的具体代码，供大家参考，具体内容如下：

vue实现循环滚动列表

1.安装插件 vue-seamless-scroll

vue-seamless-scroll 实例文档

npm install vue-seamless-scroll --save

2.HTML代码

<!-- 列表滚动 -->
<div class="list-roll">
  <div class="list-roll-title">中奖名单</div>
  <!--使用vue-seamless-scroll，:data绑定需要循环显示的列表数据-->
  <vue-seamless-scroll
    v-if="winningList.length > 0"
    :data="lists"
    class="list-roll-content"
    :class-option="classOption"
  >
    <div
      class="list-roll-item"
      v-for="(item, index) in winningList"
      :key="index"
    >
      {{ item }}
    </div>
  </vue-seamless-scroll>
</div>

3.JS代码 

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
    components: {
        vueSeamlessScroll
    },
    data() {
        return {
            winningList: [],
            lists: [
                { content: "135****6544用户 抽中" },
                { content: "130****6969用户 抽中" },
                { content: "158****3756用户 抽中" },
                { content: "132****2121用户 抽中" },
                { content: "150****5433用户 抽中" },
                { content: "156****1264用户 抽中" },
                { content: "186****3657用户 抽中" },
                { content: "131****9867用户 抽中" },
                { content: "185****0576用户 抽中" },
                { content: "134****1645用户 抽中" },
                { content: "155****5673用户 抽中" },
                { content: "136****2498用户 抽中" },
                { content: "152****0563用户 抽中" },
                { content: "182****9475用户 抽中" },
                { content: "138****4601用户 抽中" },
                { content: "139****2856用户 抽中" },
                { content: "151****2467用户 抽中" },
                { content: "157****3851用户 抽中" },
                { content: "137****3953用户 抽中" },
                { content: "159****4820用户 抽中" }
            ],
             prizeNameList: [ .....(自行补充) ], // 奖品名称列表
        }
    }
    computed: {
        classOption() {
          return {
            step: 0.7, // 数值越大速度滚动越快
            limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
            hoverStop: false, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: false, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
          };
        },
    },

    mounted() {
        this.concatenateRandomElement();
    },
    
    methods: {
        // 随机拼接元素
        concatenateRandomElement() {
          // 遍历目标数组的每一项
          this.winningList = this.lists.map((item) => {
            // 随机选择一个元素
            let randomElement =
              this.prizeNameList[
                Math.floor(Math.random() * this.prizeNameList.length)
              ];
            // 将选中的元素与目标数组的当前项拼接起来
            return item.content + randomElement;
          });
          console.log("this.winningList :>> ", this.winningList);
        }

    }

}


</script>

4.css代码 

<style lang="less" scoped>
.list-roll {
      padding: 0.32rem 0.24rem 0.2rem;
      /*调整滚动的样式，主要是高度*/
      height: 5.68rem;
      background-color: #ffffff;
      border-radius: 16px;
      &-title {
        text-align: center;
        font-size: 0.36rem;
        font-weight: 600;
        color: #ae5f21;
      }
      &-content {
        margin-top: 0.28rem;
        height: 215px;
        overflow: hidden;
      }
      &-item {
        padding: 0.32rem;
        font-size: 0.24rem;
        color: #ae5f21;
        background-color: #fef9ef;
        border-radius: 0.24rem;
        margin-bottom: 0.12rem;
      }
      ul li {
        margin: 20px;
      }
    }
</style>