# tui-digital-roller 数字滚轮

介绍

数字滚轮,数值变动时滚动效果。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiDigitalRoller from "@/components/thorui/tui-digital-roller/tui-digital-roller"
export default {
	components:{
		tuiDigitalRoller
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-digital-roller": "/components/thorui/tui-digital-roller/tui-digital-roller"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用

通过 value 属性设置滚轮显示数值。

<!--uni-app-->
<tui-digital-roller :value="value"></tui-digital-roller>

<!--微信小程序-->
<tui-digital-roller value="{{value}}"></tui-digital-roller>
设置样式

通过 color 属性设置滚轮文本的颜色,size 属性设置文本字体大小,cellHeight 属性设置滚动行高度,bold 属性设置文本是否为粗体。

<!--uni-app-->
<tui-digital-roller :value="value" color="#07c160" :size="60" :cellHeight="60" bold></tui-digital-roller>

<!--微信小程序-->
<tui-digital-roller value="{{value}}" color="#07c160" size="{{60}}" cellHeight="{{60}}" bold></tui-digital-roller>

# Slots

none

# Props

参数 类型 说明 默认值
value [Number, String] 滚轮显示数值 -
color String 滚轮显示文本颜色 #5677fc
size Number 滚轮文本字体大小,单位rpx 32
bold Boolean 滚轮文本是否为粗体 false
cellHeight Number 滚动行高度,单位rpx 32
cellWidth String 单个数字宽度 auto
animation String 动画过渡效果 cubic-bezier(0, 1, 0, 1)
duration Number 过渡动画时间,单位s 1.2

# Events

none

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码