Slider 滑块选择器 V1.2.1+

概述

Slider 滑动选择器，用于选择特定的值。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiSlider from "@/components/firstui/fui-slider/fui-slider.uvue"
export default {
	components:{
		fuiSlider
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 margin-top 属性设置距离顶部内容距离。

<fui-slider :margin-top="32" @change="onChange" @changing="onChanging"></fui-slider>

export default {
	data() {
		return {
			
		}
	},
	methods: {
		onChange(e : number) {
			console.log(e)
			// this.fui.toast(`您选择的值为：${e}`)
		},
		//需要实时数据时使用
		onChanging(e : number) {
			console.log(e)
		}
	}
}

初始值/显示value

通过 margin-top 属性设置距离顶部内容距离，v-model 用于双向绑定，showValue 用于设置是否显示value值。

<fui-slider :margin-top="32" v-model="value" :showValue="true"></fui-slider>

export default {
	data() {
		return {
			value: 50
		}
	},
	methods: {
		
	}
}

Slots

插槽名称	说明
default	用于替换value值内容

Props

属性名	类型	说明	默认值	平台差异说明
name	String	表单的控件名称	-	-
height	Number	slider高度，单位px	2	-
radius	Number	slider圆角值，单位px	2	-
min	Number	最小值	0	-
max	Number	最大值	100	-
step	Number	步长，取值必须大于 0，并且可被(max - min)整除	1	-
modelValue	Number	默认值	0	-
background	String	slider未选择时背景颜色	#e1e1e1	-
activeColor	String	slider已选择部分背景颜色	#465CFF	-
blockWidth	Number	滑块宽度，单位px	28	-
blockHeight	Number	滑块高度，单位px	28	-
blockColor	String	滑块背景颜色	#fff	-
blockRadius	Number	滑块圆角值，单位px	14	-
disabled	Boolean	是否禁止滑动选择/仅展示	false	-
showValue	Boolean	是否显示value值	false	-
valueWidth	Number	value框宽度，单位rpx	56	-
valueSize	Number	value字体大小，单位rpx	28	-
valueColor	String	value字体颜色	#333	-
marginTop	Number	组件margin-top值，单位rpx	0	-
marginBottom	Number	组件margin-bottom值，单位rpx	0	-

Events

事件名	类型	说明	回调参数
@change	(event: number) => void	滑动结束时触发	number：值
@changing	(event: number) => void	滑动时触发，实时数据	number：值
@update:modelValue	(event: number) => void	滑动时触发，实时数据，用于双向绑定	number：值

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP unix版VIP用户可免费使用 。

开通会员 (opens new window)