tui-scale-horizontal 刻度尺滚动选择器（横向） 会员组件

介绍

刻度尺：刻度尺横向滚动选择器，可自定义样式。

提示

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

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiScaleHorizontal from "@/components/thorui/tui-scale-horizontal/tui-scale-horizontal.vue"
export default {
	components:{
		tuiScaleHorizontal
	}
}

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

uni-app版本平台差异说明

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

微信小程序引入（可在app.json中全局引入）

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

代码演示

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

基础使用

通过 value 属性设置初始值。

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

<!--微信小程序-->
<tui-scale-horizontal value="{{defaultValue}}" bindchange="change"></tui-scale-horizontal>

自定义样式

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

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

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

Slots

插槽名称	说明
-	-

Props

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

Events

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

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

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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