mpvue animated number

mpvue-animated-number

WeChat applet mpvue digital update scroll animation component.

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

Demo

Scan the following mini program code on WeChat to see the real effect.

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

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 : 30 px ;
    font-size : 16 px ;
    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.