快捷導(dǎo)航

基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果

更新時(shí)間：2024年03月19日 08:29:05 作者：芝麻小仙女

這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果,從而達(dá)到顯示計(jì)時(shí)器滾動(dòng)效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

需求：

在頁(yè)面中顯示一個(gè)數(shù)字，并在進(jìn)入視口時(shí)顯示計(jì)時(shí)器滾動(dòng)效果：

效果如上

實(shí)現(xiàn)代碼

新建組件ScrollNumber.vue：

<template>
  <div
    style="
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
    "
  >
    <div
      v-for="(item, index) in numberList"
      :key="index"
      style="
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 0.3rem;
        box-sizing: border-box;
      "
    >
      <span v-if="isNaN(item)">{{ item }}</span>
      <div class="number" v-else>
        <span
          class="number-item"
          ref="numberItem"
          :data-number="item"
          :data-index="index"
          >0123456789</span
        >
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "ScrollNumber",
  props: {
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.setNumberTransform();
        });
      }
    },
  },
  computed: {
    numberList() {
      return String(this.value).split("");
    },
  },
  data() {
    return {
      hasShow: false, // 是否已展示過(guò)動(dòng)畫
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true); // 監(jiān)聽(tīng) 監(jiān)聽(tīng)元素是否進(jìn)入/移出可視區(qū)域
  },
 
  methods: {
    scrollHandle() {
      const offset = this.$el.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      // 進(jìn)入可視區(qū)域
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        this.setNumberTransform();
        this.hasShow = true;
        window.removeEventListener("scroll", this.scrollHandle, true);
      } else {
        // 移出可視區(qū)域
        if (this.hasShow) {
          window.removeEventListener("scroll", this.scrollHandle, true);
        }
      }
    },
    // 設(shè)置每一位數(shù)字的偏移
    setNumberTransform() {
      let numberItems = this.$refs.numberItem;
      let obj = {};
      Array.from(numberItems).forEach((c) => {
        let key = c.dataset.index;
        let value = c.dataset.number;
        let init = 0;
        obj[key] = setInterval(() => {
          if (init < value * 10) {
            init += 1;
            c.style.transform = `translateY(-${init}%)`;
          } else {
            clearInterval(obj[key]);
            obj[key] = null;
          }
        }, 8);
      });
    },
  },
};
</script>
 
<style scoped lang="less">
.number {
  width: 0.42rem;
  height: 0.62rem;
  font-size: 0.56rem;
  font-weight: 800;
  color: #ffe52c;
  text-align: center;
  overflow: hidden;
  line-height: 0.42rem;
  > span {
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateY(0%);
  }
}
</style>

使用：

import ScrollNumber from "../ScrollNumber/ScrollNumber.vue";

<scroll-number :value="num.toString()"></scroll-number>

到此這篇關(guān)于基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果的文章就介紹到這了,更多相關(guān)Vue2數(shù)字縱向滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: