快捷導(dǎo)航

vue封裝實(shí)現(xiàn)自動(dòng)循環(huán)滾動(dòng)的列表

更新時(shí)間：2023年09月14日 11:15:59 作者：HXY999

在做數(shù)據(jù)大屏開發(fā)的過程中,經(jīng)常出現(xiàn)需要對(duì)列表進(jìn)行自動(dòng)滾動(dòng)的需求,所以本文就來為大家介紹一下如何利用vue封裝一個(gè)自動(dòng)循環(huán)滾動(dòng)的列表吧

一、勻速自動(dòng)滾動(dòng)，并實(shí)現(xiàn)方法可對(duì)多個(gè)列表復(fù)用
二、如何暫時(shí)關(guān)閉自動(dòng)滾動(dòng)
三、如何徹底關(guān)閉自動(dòng)滾動(dòng)
四、如何使自動(dòng)滾動(dòng)無限循環(huán)，使其頭尾相連

前言

在做數(shù)據(jù)大屏開發(fā)的過程中，經(jīng)常出現(xiàn)需要對(duì)列表進(jìn)行自動(dòng)滾動(dòng)的需求，為了個(gè)性化的實(shí)現(xiàn)各種需求，就封裝了一個(gè)函數(shù)方法

解決方案

生成一個(gè)父元素，并給其固定的高度，通過$refs獲取并賦值給container變量
獲取一些關(guān)于container和其子元素的信息，如父容器高度(parentHeight)、滾動(dòng)高度(scrollHeight)、第一個(gè)子元素的高度(childHeight)、子元素?cái)?shù)量(childCount)、最大高度(maxHeight)、當(dāng)前滾動(dòng)位置(toHeight)和當(dāng)前子元素索引(current)，并初始化一個(gè)名為timer的計(jì)時(shí)器。
定義一個(gè)名為scrollCore的函數(shù)，該函數(shù)用于實(shí)現(xiàn)滾動(dòng)效果。
在scrollCore函數(shù)中檢查如果scrollHeight大于parentHeight，則創(chuàng)建一個(gè)定時(shí)器，以便每隔一段時(shí)間執(zhí)行一次滾動(dòng)操作。
在定時(shí)器中，scrollCore函數(shù)中逐漸增加容器的scrollTop屬性，從而實(shí)現(xiàn)滾動(dòng)效果。

一、勻速自動(dòng)滾動(dòng)，并實(shí)現(xiàn)方法可對(duì)多個(gè)列表復(fù)用

思路：通過對(duì)ref的命名，來實(shí)現(xiàn)在方法中使用for循環(huán)來對(duì)多個(gè)列表生效

<template>
<div>
    <ul class="shiJianGaoJingContent_right" ref="scroll0">
        <li class="gaojing_info_list" v-for="(item, index) in scrollInfoList" :key="index">
        </li>
    </ul> 
</div>
</template>
<script>
export default {
  data() {
    return {
      scrollInfoList:[],
    };
  },
  methods: {
  // 列表自動(dòng)滾動(dòng)
    scrollFn() {
      let dataList = [];
      for (let i = 0; i < 1; i++) {
        let container = this.$refs["scroll" + i];
        let parentHeight = container.offsetHeight || 0;
        let scrollHeight = container.scrollHeight;
        let childHeight = container.firstChild.offsetHeight;
        let childCount = container.childNodes.length;
        let maxHeight = childHeight * childCount;
        let toHeight = container.scrollTop;
        let current = 0;
        dataList.push({
          parentHeight,
          scrollHeight,
          childHeight,
          childCount,
          maxHeight,
          toHeight,
          current,
          timer: null,
          timerMouseWheel: null,
        });
        function scrollCore() {
          {
            if (scrollHeight > parentHeight) {
              dataList[i].timer = setInterval(() => {
                let scrollStep = 1; // 每幀滾動(dòng)的步長，可以適當(dāng)調(diào)整
                if (container.scrollTop + parentHeight + 5 >= scrollHeight) {
                  // 如果滾動(dòng)到底部，則將滾動(dòng)位置重置為0
                  container.scrollTop = 0;
                  dataList[i].toHeight = 0;
                  dataList[i].current = 0;
                } else {
                  if (container.scrollTop < dataList[i].toHeight + dataList[i].childHeight) {
                    // 如果尚未滾動(dòng)到目標(biāo)位置，則逐幀更新滾動(dòng)位置
                    container.scrollTop += scrollStep;
                  } else {
                    // 已滾動(dòng)到目標(biāo)位置，更新當(dāng)前子項(xiàng)索引和子項(xiàng)高度
                    dataList[i].current = (dataList[i].current + 1) % dataList[i].childCount;
                    dataList[i].childHeight = container.childNodes[dataList[i].current].offsetHeight;
                    dataList[i].toHeight = container.scrollTop;
                  }
                }
              }, 2000 / 60); // 設(shè)置每秒更新60次，可根據(jù)需求調(diào)整
            }
          }
        }
        scrollCore()
      }
    },
  },
  mounted() {},
};
</script>

注：該方法在自動(dòng)滾動(dòng)到底部后會(huì)返回到頂部，循環(huán)滾動(dòng)需要更改邏輯，在下方有循環(huán)的方法。

二、如何暫時(shí)關(guān)閉自動(dòng)滾動(dòng)

當(dāng)我們想自己通過鼠標(biāo)滾輪滾動(dòng)該列表時(shí)，使該列表的自動(dòng)滾動(dòng)暫停，我們可以添加了一個(gè)名為mousewheel的事件監(jiān)聽器，以便在鼠標(biāo)滾輪滾動(dòng)時(shí)執(zhí)行以下操作：

清除之前的定時(shí)器dataList[i].timer和dataList[i].timerMouseWheel。
更新dataList[i].toHeight為當(dāng)前滾動(dòng)位置，并將滾動(dòng)位置設(shè)置為相同的值。
設(shè)置一個(gè)新的定時(shí)器dataList[i].timerMouseWheel，在一段時(shí)間后重新調(diào)用scrollCore函數(shù)，以恢復(fù)自動(dòng)滾動(dòng)效果。

 container.addEventListener("mousewheel", () => {
          this.$nextTick(() => {
            clearInterval(dataList[i].timer);
            clearInterval(dataList[i].timerMouseWheel);
            dataList[i].toHeight = container.scrollTop;
            container.scrollTop = container.scrollTop;
            dataList[i].timerMouseWheel = setTimeout(() => {
              scrollCore()
            }, 3000)
          });
        });

三、如何徹底關(guān)閉自動(dòng)滾動(dòng)

在上面的方法中會(huì)一直無限的滾動(dòng)下去，那么我們?nèi)绻胪Ｏ戮唧w看某一項(xiàng)要把自動(dòng)滾動(dòng)關(guān)閉掉呢，我們可以通過將關(guān)閉方法寫在container的某個(gè)事件中，并將該事件派發(fā)給container來實(shí)現(xiàn)

// 監(jiān)聽關(guān)閉自動(dòng)滾動(dòng)的事件
container.addEventListener("closeScroll", () => {
          this.$nextTick(() => {
            clearInterval(dataList[i].timer);
            clearInterval(dataList[i].timerMouseWheel);
            toHeight = container.scrollTop;
            container.scrollTop = container.scrollTop;
          });
        });

// 完整代碼
// 關(guān)閉列表自動(dòng)滾動(dòng)
    closeListScroll(container) {
      // 創(chuàng)建一個(gè)新的 自定義 事件
      const closeScroll = new Event("closeScroll");
      container.dispatchEvent(closeScroll)
    },
// 列表自動(dòng)滾動(dòng)
    scrollFn() {
      let dataList = [];
      for (let i = 0; i < 1; i++) {
        let container = this.$refs["scroll" + i];
        let parentHeight = container.offsetHeight || 0;
        let scrollHeight = container.scrollHeight;
        let childHeight = container.firstChild.offsetHeight;
        let childCount = container.childNodes.length;
        let maxHeight = childHeight * childCount;
        let toHeight = container.scrollTop;
        let current = 0;
        dataList.push({
          parentHeight,
          scrollHeight,
          childHeight,
          childCount,
          maxHeight,
          toHeight,
          current,
          timer: null,
          timerMouseWheel: null,
        });
        function scrollCore() {
          {
            if (scrollHeight > parentHeight) {
              dataList[i].timer = setInterval(() => {
                let scrollStep = 1; // 每幀滾動(dòng)的步長，可以適當(dāng)調(diào)整
                if (container.scrollTop + parentHeight + 5 >= scrollHeight) {
                  // 如果滾動(dòng)到底部，則將滾動(dòng)位置重置為0
                  container.scrollTop = 0;
                  dataList[i].toHeight = 0;
                  dataList[i].current = 0;
                } else {
                  if (container.scrollTop < dataList[i].toHeight + dataList[i].childHeight) {
                    // 如果尚未滾動(dòng)到目標(biāo)位置，則逐幀更新滾動(dòng)位置
                    container.scrollTop += scrollStep;
                  } else {
                    // 已滾動(dòng)到目標(biāo)位置，更新當(dāng)前子項(xiàng)索引和子項(xiàng)高度
                    dataList[i].current = (dataList[i].current + 1) % dataList[i].childCount;
                    dataList[i].childHeight = container.childNodes[dataList[i].current].offsetHeight;
                    dataList[i].toHeight = container.scrollTop;
                  }
                }
              }, 2000 / 60); // 設(shè)置每秒更新60次，可根據(jù)需求調(diào)整
            }
          }
        }
        scrollCore()
        container.addEventListener("mousewheel", () => {
          this.$nextTick(() => {
            clearInterval(dataList[i].timer);
            clearInterval(dataList[i].timerMouseWheel);
            dataList[i].toHeight = container.scrollTop;
            container.scrollTop = container.scrollTop;
            dataList[i].timerMouseWheel = setTimeout(() => {
              scrollCore()
            }, 3000)
          });
        });
        container.addEventListener("closeScroll", () => {
          this.$nextTick(() => {
            clearInterval(dataList[i].timer);
            clearInterval(dataList[i].timerMouseWheel);
            toHeight = container.scrollTop;
            container.scrollTop = container.scrollTop;
          });
        });
      }
    },

通過如上代碼我們就可以通過調(diào)用closeListScroll()方法來關(guān)閉列表自動(dòng)滾動(dòng)，如我們想要關(guān)閉ref=scroll0列表的自動(dòng)滾動(dòng)

// 示例 關(guān)閉ref=scroll0列表的自動(dòng)滾動(dòng)
// 某個(gè)方法中
clickSomeBtn(){
    ... //其他邏輯
    this.closeListScroll(this.$refs["scroll0"])
}

四、如何使自動(dòng)滾動(dòng)無限循環(huán)，使其頭尾相連

思路：將一份數(shù)據(jù)復(fù)制為兩份，在滾動(dòng)到第二份與第一份重合的時(shí)候立刻將滾動(dòng)高度歸位，這樣從視覺效果上來看，就是無限滾動(dòng)的效果要實(shí)現(xiàn)這個(gè)效果，首先是我們需要將一份數(shù)據(jù)變?yōu)閮煞荩顬楹唵蔚膶?shí)現(xiàn)思路為直接將數(shù)據(jù)變?yōu)閮煞?/p>

<li class="gaojing_info_list" v-for="(item, index) in [...scrollInfoList,...scrollInfoList]" :key="index">

但是這樣的話，我們需要對(duì)所有的列表都進(jìn)行更改，容易遺漏，不符合封裝思路
于是我就想著通過DOM方法直接在封裝函數(shù)中進(jìn)行操作，實(shí)現(xiàn)思路為

使用DOM方法獲取container的所有子元素，并將它們存儲(chǔ)在名為children的變量中。
創(chuàng)建一個(gè)文檔片段（Document Fragment）并將子元素逐個(gè)克隆并添加到文檔片段中。
一次性將文檔片段添加回container中，以提高性能。當(dāng)我們實(shí)現(xiàn)了克隆兩份數(shù)據(jù)后，通過對(duì)container.scrollTop >= scrollHeight / 2的判斷，來得到我們已經(jīng)來到了第二頁與初始位置重復(fù)的位置，在這個(gè)時(shí)候?qū)L動(dòng)位置重置，在視覺上就會(huì)實(shí)現(xiàn)首尾相連無限滾動(dòng)的效果

// 列表自動(dòng)循環(huán)滾動(dòng)
scrollFn() {
  let dataList = [];
  for (let i = 0; i < 1; i++) {
    let container = this.$refs["scroll" + i];
    console.log(container);
    // 使用 DOM 方法獲取所有子元素
    let children = container.children;
    // 創(chuàng)建一個(gè)文檔片段
    let fragment = document.createDocumentFragment();
    // 將子元素逐個(gè)重新插入到容器中
    for (let ind = 0; ind < children.length; ind++) {
      const child = children[ind].cloneNode(true);
      console.log(child, "child");
      fragment.appendChild(child);
    }
    // 一次性將文檔片段添加回容器中
    this.$refs["scroll" + i].appendChild(fragment);
    let parentHeight = container.offsetHeight || 0;
    let scrollHeight = container.scrollHeight;
    let childHeight = container.firstChild.offsetHeight;
    let childCount = container.childNodes.length;
    let maxHeight = childHeight * childCount;
    let toHeight = container.scrollTop;
    let current = 0;
    dataList.push({
      parentHeight,
      scrollHeight,
      childHeight,
      childCount,
      maxHeight,
      toHeight,
      current,
      timer: null,
    });
    function scrollCore() {
      if (scrollHeight > parentHeight) {
        dataList[i].timer = setInterval(() => {
          let scrollStep = 1; // 每幀滾動(dòng)的步長，可以適當(dāng)調(diào)整
          if (container.scrollTop >= scrollHeight / 2) {
            // 滾動(dòng)到與第一行重復(fù)的位置后 重置
            container.scrollTop = 0;
            dataList[i].toHeight = 0;
            dataList[i].current = 0;
          } else {
            if (
              container.scrollTop <
              dataList[i].toHeight + dataList[i].childHeight
            ) {
              // 如果尚未滾動(dòng)到目標(biāo)位置，則逐幀更新滾動(dòng)位置
              container.scrollTop += scrollStep;
            } else {
              // 已滾動(dòng)到目標(biāo)位置，更新當(dāng)前子項(xiàng)索引和子項(xiàng)高度
              dataList[i].current =
                (dataList[i].current + 1) % dataList[i].childCount;
              dataList[i].childHeight =
                container.childNodes[dataList[i].current].offsetHeight;
              dataList[i].toHeight = container.scrollTop;
            }
          }
        }, 2000 / 60); // 設(shè)置每秒更新60次，可根據(jù)需求調(diào)整
      }
    }
    scrollCore();
    container.addEventListener("mousewheel", () => {
      this.$nextTick(() => {
        clearInterval(dataList[i].timer);
        clearInterval(dataList[i].timerMouseWheel);
        dataList[i].toHeight = container.scrollTop;
        container.scrollTop = container.scrollTop;
        dataList[i].timerMouseWheel = setTimeout(() => {
          scrollCore();
        }, 3000);
      });
    });
     container.addEventListener("closeScroll", () => {
          this.$nextTick(() => {
            clearInterval(dataList[i].timer);
            clearInterval(dataList[i].timerMouseWheel);
            toHeight = container.scrollTop;
            container.scrollTop = container.scrollTop;
          });
        });
  }
}

以上就是vue封裝實(shí)現(xiàn)自動(dòng)循環(huán)滾動(dòng)的列表的詳細(xì)內(nèi)容，更多關(guān)于vue循環(huán)滾動(dòng)列表的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: