# tui-scale-vertical 刻度尺滚动选择器(纵向)

介绍

刻度尺:刻度尺纵向滚动选择器,可自定义样式。

提示

事件返回的value值未做处理,需要整数或者保留几位小数请自行处理。

# 引入

# uni-app引入

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

import tuiScaleVertical from "@/components/thorui/tui-scale-vertical/tui-scale-vertical"
export default {
	components:{
		tuiScaleVertical
	}
}

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

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

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

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

{
  "usingComponents": {
    "tui-scale-vertical": "/components/thorui/tui-scale-vertical/tui-scale-vertical"
  }
}

# 代码演示

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

基础使用

通过 value 属性设置初始值。

<!--uni-app-->
<tui-scale-vertical :value="defaultValue" @change="change"></tui-scale-vertical>

<!--微信小程序-->
<tui-scale-vertical value="{{defaultValue}}" bindchange="change"></tui-scale-vertical>
自定义样式

通过 height 属性设置刻度尺外层容器高度 (默认为屏幕宽度) ,min 属性设置刻度尺最小值,max 属性设置刻度尺最大值,interval 属性设置刻度尺每段的间隔(取值必须大于 0,并且可被(max - min)整除),backgroundColor 属性设置刻度尺外层容器背景色,color 属性设置刻度值字体颜色,lineColor 属性设置刻度线颜色,pointerColor 属性设置刻度尺指针颜色。

<!--uni-app-->
<tui-scale-vertical :height="400" :min="100" :max="900" :interval="100" backgroundColor="#FFD531" color="#fff" lineColor="#fff" pointerColor="#EB0909" @change="change2"></tui-scale-vertical>

<!--微信小程序-->
<tui-scale-vertical height="{{400}}" min="{{100}}" max="{{900}}" interval="{{100}}" backgroundColor="#FFD531" color="#fff" lineColor="#fff" pointerColor="#EB0909" bindchange="change2"></tui-scale-vertical>

# Slots

名称 说明
- -

# Props

参数 类型 说明 默认值
value Number 初始值 0
height Number 刻度尺外层容器高度 ,默认为屏幕宽度,单位px 0
backgroundColor String 刻度尺外层容器背景色 #FEFEFE0
paddingRight [Number, String] 刻度尺外层容器 padding-right值,单位rpx 30
min Number 刻度尺最小值 0
max Number 刻度尺最大值 10
interval Number 刻度尺每段的间隔,取值必须大于 0,并且可被(max - min)整除 1
width Number 刻度线长度(最短),单位rpx 40
mWidth Number 刻度线长度(中等),单位rpx 60
lWidth Number 刻度线长度(最长),单位rpx 80
lineColor String 刻度线颜色 #333
singleHeight Number 单个格子高度,单位px 8
size [Number, String] 刻度值字体大小,单位rpx 32
color String 刻度值字体颜色 #000
left Number 刻度值距离刻度线距离,单位rpx 12
isPointer Boolean 是否需要指针 true
pointerWidth Number 刻度尺指针宽度,单位px 12
pointerColor String 刻度尺指针颜色 #5677fc
pointerLeft Number 刻度尺指针left值,单位px -12

# Events

事件名 说明 回调参数
change 滚动选择时刻度值变化时触发 {value: Number}

# 预览

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

# 线上程序扫码预览

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