?本文章使用 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>