vue列表自動(dòng)滾動(dòng)實(shí)例

更新時(shí)間：2023年10月09日 08:48:13 作者：學(xué)不會(huì)190

這篇文章主要介紹了vue列表自動(dòng)滾動(dòng)實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue列表自動(dòng)滾動(dòng)

想要實(shí)現(xiàn)vue列表數(shù)據(jù)自動(dòng)滾動(dòng)，鼠標(biāo)劃入列表滾動(dòng)停止

就是這樣的效果

下面上代碼

首先安裝 npm install vue-seamless-scroll --save

npm install vue-seamless-scroll --save

在需要的頁(yè)面引入

import vueSeamlessScroll from "vue-seamless-scroll";

使用

<vueSeamlessScroll
   :data="vehicleRecordListData"
   class="seamless-warp"
   :class-option="defaultOption"
 >
   <ul class="item">
      <li
           v-for="(item, index) in vehicleRecordListData"
           :key="index"
        >
                        <span class="title" v-text="item.inAutoPlate"></span>
                        <span class="date" v-text="item.vehicleCategory"></span>
                        <span class="date" v-text="item.isInOrOut"></span>
                        <span>{{ item.inOrOutTime | dateFormatValue }}</span>
                        <span>{{ item.inOrOutType }}</span>
                        <span>{{ item.inOrOutLaneName }}</span>
                      </li>
                    </ul>
                  </vueSeamlessScroll>

配置項(xiàng)

key	description	default	val
step	數(shù)值越大速度滾動(dòng)越快	1	Number
limitMoveNum	開啟無縫滾動(dòng)的數(shù)據(jù)量	5	Number
hoverStop	是否啟用鼠標(biāo)hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移動(dòng)端開啟touch滑動(dòng)	true	Boolean
singleHeight	單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1	0	Number
singleWidth	單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3	0	Number
waitTime	單步停止等待時(shí)間(默認(rèn)值1000ms)	1000	Number

vue列表自動(dòng)滾動(dòng) 加鼠標(biāo)滾輪

<template>
  <div class="scroll-container" id="scrollContainer">
    <Scroll :id="'service'">
      <template>
        <!-- <div v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
          {{item.name}}
        </div> -->
        <ul>
          <li v-for="(item,idx) in scrollListData" :key="idx + 'n'" class="service" @click="rowClick(item)">
            <div class="service-chaild">{{ item.name }}</div>
            <div class="service-chaild">{{ item.value }}</div>
          </li>
        </ul>
      </template>
    </Scroll>
  </div>
</template>
<script>
  import Scroll from "@/components/HelloWorld";
  export default {
    name: 'TestPage',
    components: {
      Scroll
    },
    data() {
      return {
        scrollListData: [{
            name: '嘉興',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '蘇州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          },
          {
            name: '嘉興',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '蘇州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          },
          {
            name: '嘉興',
            value: '5555'
          },
          {
            name: '上海',
            value: '5555'
          },
          {
            name: '蘇州',
            value: '5555'
          },
          {
            name: '南京',
            value: '5555'
          }
        ]
      };
    },
    methods: {
      rowClick(row) {
        console.log(row, 'row ==================')
      }
    },
  };
</script>
<style>
  .scroll-container {
    height: 200px;
    width: 200px;
    margin-bottom: 20px;
  }
  .service {
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    display: flex;
  }
  .service:nth-child(odd) {
    background: yellow;
  }
  .service:nth-child(even) {
    background: orange;
  }
  .service-chaild {
    height: 50px;
  }
</style>

<template>
  <div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ScrollList',
    props: {
      id: String
    },
    data() {
      return {
        timer: null
      };
    },
    methods: {
      init() {
        this.setTimer();
        // this.$once代表只執(zhí)行一次。如果組件是在keep-alive中包裹，則需要更換函數(shù)
        // 被keep-alive包裹住的組件有兩個(gè)生命周期函數(shù)：activated和deactivated
        this.$once('hook:beforeDestroy', () => {
          this.removeTimer();
        });
      },
      removeTimer() {
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
      },
      setTimer() {
        this.removeTimer();
        this.timer = setInterval(() => {
          // pixel height：include el and padding    read only
          const scrollHeight = document.getElementById(this.id).scrollHeight;
          // visible area height：include el and padding  read only
          const clientHeight = document.getElementById(this.id).clientHeight;
          const heightDifference = scrollHeight - clientHeight;
          // scroll height：readable and writable
          document.getElementById(this.id).scrollTop++;
          // when el scroll to top
          if (document.getElementById(this.id).scrollTop >= heightDifference - 1) {
            this.removeTimer();
            // make it go back to original location after one second
            setTimeout(() => {
              document.getElementById(this.id).scrollTop = 0;
              this.setTimer();
            }, 1000);
          }
        }, 44);
      },
      monseenter() {
        this.removeTimer();
      },
      mouseleave() {
        this.setTimer();
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
<style>
  .scrollContainer::-webkit-scrollbar {
    width: 4px;
    background: aliceblue;
  }
  .scrollContainer::-webkit-scrollbar-thumb {
    background: palevioletred;
    border-radius: 5px;
  }
  .scrollContainer {
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
  }
  /* // 兼容IE */
  .scrollContainer {
    /*三角箭頭的顏色*/
    scrollbar-arrow-color: #fff;
    /*滾動(dòng)條滑塊按鈕的顏色*/
    scrollbar-face-color: #0099dd;
    /*滾動(dòng)條整體顏色*/
    scrollbar-highlight-color: #0099dd;
    /*滾動(dòng)條陰影*/
    scrollbar-shadow-color: #0099dd;
    /*滾動(dòng)條軌道顏色*/
    scrollbar-track-color: #0066ff;
    /*滾動(dòng)條3d亮色陰影邊框的外觀顏色——左邊和上邊的陰影色*/
    scrollbar-3dlight-color: #0099dd;
    /*滾動(dòng)條3d暗色陰影邊框的外觀顏色——右邊和下邊的陰影色*/
    scrollbar-darkshadow-color: #0099dd;
    /*滾動(dòng)條基準(zhǔn)顏色*/
    scrollbar-base-color: #0099dd;
  }
</style>