首页 > 其他分享 >【vue2】实现数字纵向滚动效果(计时器效果)

【vue2】实现数字纵向滚动效果(计时器效果)

时间:2023-09-26 16:37:12浏览次数:39  
标签:obj key 效果 ScrollNumber value let vue2 rem 计时器

需求:

在页面中显示一个数字,并在进入视口时显示计时器滚动效果:

 效果如上 ↑

 

新建组件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, // 是否已展示过动画
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域
  },

  methods: {
    scrollHandle() {
      const offset = this.$el.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      // 进入可视区域
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        this.setNumberTransform();
        this.hasShow = true;
        window.removeEventListener("scroll", this.scrollHandle, true);
      } else {
        // 移出可视区域
        if (this.hasShow) {
          window.removeEventListener("scroll", this.scrollHandle, true);
        }
      }
    },
    // 设置每一位数字的偏移
    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>

  

p.s.本篇copy了网上大佬的代码,打个点方便以后继续copy

 

标签:obj,key,效果,ScrollNumber,value,let,vue2,rem,计时器
From: https://www.cnblogs.com/nangras/p/17730371.html

相关文章

  • 利用jQuery实现表格或者区域内数据的滚动展示效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><......
  • vue+el 实现 阶梯效果
    [简介]:关键代码;<el-rowclass='midPart'style=''>{{menu.name}}</el-row>.midPart{float:left;width:4%;padding:7px7px;background:#444;}[内容]:<template><divid="MidMenu"><divref=�......
  • Winform中使用System.Windows.Forms.Timer多次启动停止计时器时绑定事件会重复多次执
    场景C#中实现计时器功能(定时任务和计时多长时间后执行某方法):https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106274074以上关于定时器的使用。在实现点击按钮启动定时器,点击停止按钮停止定时器时发现,重复多次后会导致定时器方法累计重复执行。联想到如下情况......
  • vue2兼容ie10
    1.找到ie浏览器。可以下载,一般windows自带2.启动项目,可能会出现再ie中输入本地地址后直接跳转到MicrosoftEdge的情况,需要配置后正常使用ie10配置过程:控制面板--网络和Internet--Internet选项--更改主页--高级--勾选跟InternetExplorer相关的某项。3.解决:babel分为预设和单......
  • socks5代理服务器是什么?用什么检查socks5代理的效果行不行?
    随着互联网技术和科技的发展,在上网的时候使用代理ip的使用人数也越来越多,因为业务的需求需要使用socks5代理ip的应用范围越来越多,那么什么是socks5代理服务器?怎么检查socks5代理的效果好不好?接下来小编就给大家介绍一下:socks5代理服务器是什么意思某度解释是:采用socks协议的代理服......
  • 如何实现「点击验证码,验证码刷新」的效果?
    在注册或者登录时,因为验证码看不清,用户会想要换一个,方便的方式,是点击验证码,自动更换。思路很简单,只需要在后台获取的验证码输出url,加上时间即可,url变化,验证码自然会跟着刷新。开发环境(java)前台示例:<span><imgid="registerCaptchaImg"src="${pageContext.request.contextPat......
  • 算法题——定义一个方法自己实现 toBinaryString 方法的效果,将一个十进制整数转成字符
    用除基取余法,不断地除以基数(几进制,基数就是几)得到余数,直到商为0,再将余数倒着拼起来即可。privatestaticStringtoBinaryString(intnumber){StringBuildersb=newStringBuilder();while(true){if(number==0)break;intyushu=num......
  • vue2 访问网关的时候post无法请求
    问题复现:后台使用微服务的框架在consul配置并使用网关进行代理。 问题描述:前台访问网关调用后台方法 请求方式为get时正常使用~post时显示跨域问题 post访问路径正常但就是无效果显示跨域问题报错解决方法:module.exports=defineConfig({......
  • 【vue2】 demo1
    练习用的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>......
  • android短视频开发,两个ViewPager联动效果
    android短视频开发,两个ViewPager联动效果activity_main.xml <?xmlversion="1.0"encoding="utf-8"?><android.support.v4.widget.NestedScrollViewxmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://......