Vue實現數據循環滾動顯示!

1、首先下載插件

cnpm install vue-seamless-scroll --save

2、在需要的頁面引入、使用配置

import vueSeamlessScroll from 'vue-seamless-scroll'
//注冊組件
components: {
    vueSeamlessScroll
  },

3、代碼如下:

    <template>
          <vue-seamless-scroll
                :data="arr"
                class="seamless-warp"
                :class-option="classOptiona"
              >
                <table cellspacing="0" cellpadding="0">
                  <tr
                    v-for="(item, index) in arr"
                    :key="index"
                    style="border: 1px dashed #ffffff;width:100%"
                  >
                    <td class="tab_title">{{ item.number }}</td>
                    <td class="tab_title">{{ item.name }}</td>
                    <td class="tab_title">{{ item.kind }}</td>
                    <td class="tab_title">{{ item.value }}</td>
                    <td class="tab_title">{{ item.result }}</td>
                    <td class="" style="width:30%">{{ item.time }}</td>
                  </tr>
                </table>
              </vue-seamless-scroll>
    </template>
    export default {
          data(){
            return{
                arr:[數據.........]
          },
          computed(){
            classOption() {
              return {
                step: 0.4, // 數值越大速度滾動越快
                limitMoveNum: 1, // 開始無縫滾動的數據量 this.dataList.length
                hoverStop: true, // 是否開啟鼠標懸停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 開啟數據實時監控刷新dom
                singleHeight: 43, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
                singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
                waitTime: 2000 // 單步運動停止的時間(默認值1000ms)
            };
          },
        }
        }

      <style>
        .seamless-warp {
             overflow: hidden;
          }
      </style>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容