# Count Up 指数

# 使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-count-up": "wuss-weapp/w-count-up/index",
}

# 视频演示

# 代码演示

<w-pane title="CountUp" desc="指数" />

<w-pane desc="Default" />

<view
 style="color: #ff9900;padding: 15px 0;text-align: center;font-size: 40px;"
 hover-class="none"
 hover-stop-propagation="false"
>
    {{ count }}
</view>


<view
 style="color: #ff9900;padding: 15px 0;text-align: center;font-size: 40px;"
 hover-class="none"
 hover-stop-propagation="false"
>
    {{ count2 }}
</view>

<view
 style="color: #ff9900;padding: 15px 0;text-align: center;font-size: 40px;"
 hover-class="none"
 hover-stop-propagation="false"
>
    {{ count3 }}
</view>

<w-form
 bind:submit="handleSubmit"
>
    <w-cell-group>
        <w-input
         label="初始数字"
         name="startVal"
         value="0"
        />
        <w-input
         label="结束数字"
         name="endVal"
         value="3000"
        />
        <w-input
         label="保留小数点位数"
         name="decimals"
         value="2"
        />
        <w-input
         label="过渡时间"
         name="duration"
         value="3"
        />
        <w-button formType="submit" type="primary">
            开始
        </w-button>
    </w-cell-group>
</w-form>

import {
  CountUp
} from 'wuss-weapp/dist/index';
data: {
  count: 0,
  count2: 0,
  count3: 0,
},
handleSubmit(e) {
  const { startVal = 0 , endVal = 3000, decimals = 0, duration = 3000 } = e.detail;
  this.setData({
    count: 0
  } , () => {
    new CountUp(startVal, endVal, decimals, duration, count => this.setData({
      count
    })).start()
  })
},
onShow: function () {
  new CountUp(0, 3000, 0, 3, count => this.setData({
    count
  })).start();
  new CountUp(1000, 2333.33, 2, 5, count2 => this.setData({
    count2
  })).start();
  new CountUp(666, 66666.6666, 4, 6, count3 => this.setData({
    count3
  })).start();
},

# API

# Attribute 属性

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

, , , , ,

# Event 事件

事件名	说明	参数

# Slot 插槽

名称	说明

# Class 自定义类名

类名	说明

Edit this page

← QRCode 二维码生成 SwiperOut 侧滑菜单 →