NumberRoll 日历

组件类型：WxNumberRollComponentPublicInstance

数字滚动组件，用于常见的价格滚动场景。

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	×	√	×

基础使用

<template>
    <wx-navbar title="数字滚动"></wx-navbar>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<wx-number-roll ref="numberRollRef" :duration="1000" :from="1000" :to="99.99"></wx-number-roll>
        <button class="wx-mt-20" @click="init">打折</button>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	let numberRollRef = ref<WxNumberRollComponentPublicInstance | null>(null);
	// 调用数字滚动
	let init = ()=> {
		numberRollRef.value!.init();
	}
</script>

自定义前缀

通过设置 prefix 属性，来指定数字自定义前缀

<wx-number-roll ref="numberRollRef"  prefix="￥" :duration="1000" :from="100" :to="9.99"></wx-number-roll>

自定义颜色

通过设置 color 属性，来指定自定义颜色

<wx-number-roll ref="numberRollRef"  prefix="￥" color="#ee0a24" :duration="1000" :from="100" :to="9.99"></wx-number-roll>

动画时长

通过设置 duration 属性，来指定数字滚动的动画时长

<wx-number-roll ref="numberRollRef"  prefix="￥" :duration="2000" :from="100" :to="9.99"></wx-number-roll>

API

Props

名称	类型	默认值	描述
duration	number	1000	动画时长，单位ms
from	number	999.99	起始值
to	number	99.99	结束值
prefix	string	-	数字前缀，任意字符串
color	string(string.ColorString)	#333333	字体颜色
size	number	16	字体大小

Events

名称	类型	默认值	描述
@start	(value: number) => void	-	数字滚动开始时触发的事件
@change	(value: number) => void	-	数字滚动变化时触发的事件
@end	(value: number) => void	-	数字滚动结束时触发的事件

Methods

名称	类型	默认值	描述
init	() => void	-	触发数字滚动

演示效果