欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序通過自定義animate-numbers組件實(shí)現(xiàn)進(jìn)入頁面時(shí)數(shù)字跳動(dòng)效果

 更新時(shí)間：2025年01月26日 09:30:10   作者：trabecula_hj  
文章介紹了如何在微信小程序中實(shí)現(xiàn)進(jìn)入頁面時(shí)的數(shù)字跳動(dòng)效果,通過自定義一個(gè)名為`animate-numbers`的組件來實(shí)現(xiàn)這一功能,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

微信小程序中實(shí)現(xiàn)進(jìn)入頁面時(shí)數(shù)字跳動(dòng)效果

1. 組件定義,新建animate-numbers組件

1.1 index.js

// components/animate-numbers/index.js
Component({
  properties: {
    number: {
      type: Number,
      value: 0
    },
    duration: {
      type: Number,
      value: 1000
    }
  },
  data: {
    displayNumber: 0,
    animationFrameId: null
  },
  observers: {
    'number': function (newNumber) {
      this.animateNumber(newNumber);
    }
  },
  methods: {
    animateNumber(targetNumber) {
      const start = this.data.displayNumber;//舊值
      const end = targetNumber;//新值
      const duration = this.properties.duration;
      const increment = (end - start) / (duration / 16); // 假設(shè)每秒60幀，每幀間隔約16ms
      let current = start;
      if(this.data.animationFrameId){
        clearInterval(this.data.animationFrameId);
      }
      const animate = () => {
        current += increment;
        if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
          clearInterval(this.data.animationFrameId);
          this.setData({ displayNumber: end });
        } else {
          this.setData({ displayNumber: Math.round(current) });
        }
      };
      this.data.animationFrameId = setInterval(animate, 16);
    }
  },
  // 組件被移除時(shí)清除定時(shí)器
  detached() {
    clearInterval(this.data.animationFrameId);
  }
});

1.2 wxml

<view>{{displayNumber}}</view>

1.3 wxss

page {
  font-size: 48rpx;
  font-weight: bold;
}

2. 使用組件

"animate-numbers": "../../../components/animate-numbers/index"

 <animate-numbers number="{{attendanceInfo.month_avg_days}}" duration="1000"/>

到此這篇關(guān)于微信小程序中實(shí)現(xiàn)進(jìn)入頁面時(shí)數(shù)字跳動(dòng)效果(自定義animate-numbers組件)的文章就介紹到這了,更多相關(guān)小程序數(shù)字跳動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論