Mpvue Animated Number Save

微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue

Project README

mpvue-animated-number

微信小程序 mpvue 数字更新滚动动画组件。

An animated number component for mpvue (a framework to develop WeChat Mini Program).

Demo

微信扫一扫以下小程序码查看真实效果。

Scan the following code with WeChat to see the real-world effects.

WeChat Mini Program Scan Code

Installation

$ npm i --save @gaomd/mpvue-animated-number

Usage

Using inside the mpvue SFC, update this.temperatureReading then the number will change accordingly with elegant animation.

// src/pages/home/home.vue

<template>
  <p class="temperature">
    <AnimatedNumber
      :value="temperatureReading"
      :precision="2"
    >
    </AnimatedNumber>
  </p>
</template>

<script>
  import AnimatedNumber from '@gaomd/mpvue-animated-number';

  export default {
    components: {
      AnimatedNumber,
    },
    data() {
      return {
        temperatureReading: 3.14,
      };
    },
  }
</script>

<style>
  /* optional */
  .temperature {
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    font-weight: bolder;
    font-family: "Avenir Next Condensed", sans-serif;
    color: #333;
  }
</style>

License

Copyright (c) 2018 Mengdi Gao

Based on MIT Licensed Vue.js documentation.

This software is licensed under the MIT License.

Open Source Agenda is not affiliated with "Mpvue Animated Number" Project. README Source: gaomd/mpvue-animated-number
Stars
33
Open Issues
2
Last Commit
5 years ago

Open Source Agenda Badge

Open Source Agenda Rating