https://github.com/gaomd/mpvue-animated-number

微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
https://github.com/gaomd/mpvue-animated-number

mpvue wechat wechat-app wechat-mini-program wxmp

Last synced: 28 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gaomd/mpvue-animated-number
• Owner: gaomd
• License: other
• Created: 2018-04-28T14:01:53.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-30T09:13:00.000Z (about 7 years ago)
• Last Synced: 2025-04-18T21:27:15.835Z (about 1 month ago)
• Topics: mpvue, wechat, wechat-app, wechat-mini-program, wxmp
• Language: JavaScript
• Homepage:
• Size: 151 KB
• Stars: 33
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-mpvue - mpvue-animated-number - 数字更新滚动动画组件 (组件 / 目录)

README

        
# mpvue-animated-number

微信小程序 [mpvue](https://github.com/Meituan-Dianping/mpvue) 数字更新滚动动画组件。

An animated number component for [mpvue](https://github.com/Meituan-Dianping/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](docs/wxmp-scan-code-430.jpg)

## Installation

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

## Usage

Using inside the [mpvue SFC](http://mpvue.com/mpvue/#vue_1), update `this.temperatureReading` then the number will change accordingly with elegant animation.

```vue

// src/pages/home/home.vue

  


    

    

  


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

  export default {

    components: {

      AnimatedNumber,

    },

    data() {

      return {

        temperatureReading: 3.14,

      };

    },

  }

  /* optional */

  .temperature {

    line-height: 30px;

    font-size: 16px;

    text-align: center;

    font-weight: bolder;

    font-family: "Avenir Next Condensed", sans-serif;

    color: #333;

  }

```

## License

Copyright (c) 2018 Mengdi Gao

Based on MIT Licensed [Vue.js documentation](https://github.com/vuejs/vuejs.org/blob/master/src/v2/guide/transitioning-state.md).

This software is licensed under the [MIT License](LICENSE).