vue實現迴圈滾動列表
阿新 • • 發佈:2020-07-01
本文例項為大家分享了vue實現迴圈滾動列表的具體程式碼,供大家參考,具體內容如下
1.安裝
vue-seamless-scroll 例項文件連結
cnpm install vue-seamless-scroll --save
2.檔案中引入,元件配置
import vueSeamlessScroll from 'vue-seamless-scroll'
3.使用
<template> <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption"> <ul> <li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5"> <div class="DataList_left">{{index+1}}</div> <div class="DataList_left">{{item.itemname}}</div> <div class="DataList_left">{{item.number}}</div> </li> </ul> </vue-seamless-scroll> </template> <script> import vueSeamlessScroll from 'vue-seamless-scroll' export default { data() {},components: { //元件 vueSeamlessScroll },computed: { classOption () { return { step: 0.2,// 數值越大速度滾動越快 limitMoveNum: 2,// 開始無縫滾動的資料量 this.dataList.length hoverStop: true,// 是否開啟滑鼠懸停stop direction: 1,// 0向下 1向上 2向左 3向右 openWatch: true,// 開啟資料實時監控重新整理dom singleHeight: 0,// 單步運動停止的高度(預設值0是無縫不停止的滾動) direction => 0/1 singleWidth: 0,// 單步運動停止的寬度(預設值0是無縫不停止的滾動) direction => 2/3 waitTime: 1000 // 單步運動停止的時間(預設值1000ms) } } },} </script> <style> .seamless-warp{ width: 100%; height: calc(100% - 16px); overflow: hidden; } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。