Count Up 指数

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-count-up": "wuss-weapp/w-count-up/index",
  3. }

视频演示

代码演示

  1. <w-pane title="CountUp" desc="指数" />
  3. <w-pane desc="Default" />
  5. <view
  6.  style="color: #ff9900;padding: 15px 0;text-align: center;font-size: 40px;"
  7.  hover-class="none"
  8.  hover-stop-propagation="false"
  9. >
  10.     {{ count }}
  11. </view>
  14. <view
  15.  style="color: #ff9900;padding: 15px 0;text-align: center;font-size: 40px;"
  16.  hover-class="none"
  17.  hover-stop-propagation="false"
  18. >
  19.     {{ count2 }}
  20. </view>
  22. <view
  23.  style="color: #ff9900;padding: 15px 0;text-align: center;font-size: 40px;"
  24.  hover-class="none"
  25.  hover-stop-propagation="false"
  26. >
  27.     {{ count3 }}
  28. </view>
  30. <w-form
  31.  bind:submit="handleSubmit"
  32. >
  33.     <w-cell-group>
  34.         <w-input
  35.          label="初始数字"
  36.          name="startVal"
  37.          value="0"
  38.         />
  39.         <w-input
  40.          label="结束数字"
  41.          name="endVal"
  42.          value="3000"
  43.         />
  44.         <w-input
  45.          label="保留小数点位数"
  46.          name="decimals"
  47.          value="2"
  48.         />
  49.         <w-input
  50.          label="过渡时间"
  51.          name="duration"
  52.          value="3"
  53.         />
  54.         <w-button formType="submit" type="primary">
  55.             开始
  56.         </w-button>
  57.     </w-cell-group>
  58. </w-form>
  1. import {
  2.   CountUp
  3. } from 'wuss-weapp/dist/index';
  4. data: {
  5.   count: 0,
  6.   count2: 0,
  7.   count3: 0,
  8. },
  9. handleSubmit(e) {
  10.   const { startVal = 0 , endVal = 3000, decimals = 0, duration = 3000 } = e.detail;
  11.   this.setData({
  12.     count: 0
  13.   } , () => {
  14.     new CountUp(startVal, endVal, decimals, duration, count => this.setData({
  15.       count
  16.     })).start()
  17.   })
  18. },
  19. onShow: function () {
  20.   new CountUp(0, 3000, 0, 3, count => this.setData({
  21.     count
  22.   })).start();
  23.   new CountUp(1000, 2333.33, 2, 5, count2 => this.setData({
  24.     count2
  25.   })).start();
  26.   new CountUp(666, 66666.6666, 4, 6, count3 => this.setData({
  27.     count3
  28.   })).start();
  29. },

css

API

Attribute 属性

属性 说明 类型 默认值
startVal 开始值 number 0
endVal 结束值 number 0
decimals 小数点位数 number 0
duration 过渡时间 number -
callback 回调 function -
options 其他配置 object -

, , , , ,

Event 事件

事件名 说明 参数

Slot 插槽

名称 说明

Class 自定义类名

| 类名 | 说明 | | ————— | —————— |