本文章使用 vue-seamless-scroll 为大家分享了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-scrollv-if="winningList.length > 0":data="lists"class="list-roll-content":class-option="classOption"><divclass="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.lengthhoverStop: false, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: false, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 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>