uniapp中uview组件库丰富的Slider 滑动选择器的使用方法

发布时间:2024年01月04日

目录

#平台差异说明

#基本使用

#设置最大和最小值

#设置步进值

#禁用状态

#自定义按钮的内容和样式

#自定义滑动选择器整体的样式

#此页面源代码地址

#API

#Props

#Slider Events


该组件一般用于表单中,手动选择一个区间范围的场景。

说明

该组件在H5微信小程序APP-VUE等平台上使用了WXS技术,在NVUE平台使用了BindingX技术, 故在滑动过程中可以获得细腻流畅的跟随效果。

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

需要通过v-model绑定一个值,来初始化滑块的选择值(0到100之间),这个值是双向绑定的,您可以通过这个值,实时地得知内部的滑动结果。

<template>
	<u-slider v-model="value"></u-slider>
</template>
	
<script>
	export default {
		data() {	
			return {
				value: 30
			}
		}
	}
</script>

#设置最大和最小值

通过minmax,可以设置滑块所能选择的最大和最小值

<u-slider v-model="value" min="30" max="80"></u-slider>

#设置步进值

通过step参数设置步进值,这个步进值为每次跳变的值,具体表现请见示例。

提示

需要注意的是,这个step必须要被max值整除,否则会出现无法无法滑动到最大值的情况

<u-slider v-model="value" step="20" min="30" max="100"></u-slider>

#禁用状态

<u-slider v-model="value" disabled></u-slider>

#自定义按钮的内容和样式

  • activeColor,设置进度条的激活部分颜色
  • inactiveColor,进度条的激活部分颜色
  • inactiveColor,进度条的背景颜色
  • blockColor,滑块的背景颜色
  • blockStyle,用户对滑块的自定义样式(颜色)
<template>
	<u-slider v-model="value" activeColor="#3c9cff" inactiveColor="#c0c4cc">
	
	</u-slider>
</template>
	
<script>
	export default {
		data() {	
			return {
				value: 30
			}
		}
	}
</script>

#自定义滑动选择器整体的样式

  • 通过inactive-color配置底部滑动条背景颜色
  • 通过active-color配置底部选择部分的背景颜色
  • 通过block-width配置滑块宽度(高等于宽)
  • 通过block-color配置滑动按钮按钮的颜色
  • 通过height配置滑块条高度,单位rpx

其他更多参数详见底部API

<u-slider v-model="value" block-width="40" block-color="red"></u-slider>

#此页面源代码地址

页面源码地址
?编辑?github?编辑?gitee

#API

#Props

参数说明类型默认值可选值
value双向绑定滑块选择值String | Number0-
blockSize滑块的大小String | Number1812 - 28
min可选的最小值(0-100之间)String | Number1-
max可选的最大值(0-100之间)String | Number100-
step选择的步长String | Number1-
activeColor进度条的激活部分颜色String#2979ff-
inactiveColor进度条的背景颜色String#c0c4cc-
blockColor滑块背景颜色String#ffffff-
showValue是否显示当前 valueBooleanfalsetrue
blockStyle滑块按钮自定义样式,对象形式Object | String--

#Slider Events

事件名说明回调参数
input更新v-model的(拖动过程中)value:当前值
changing触发事件(拖动过程中)value:当前值
input更新v-model的value:当前值
change触发事件value:当前值

文章来源:https://blog.csdn.net/m0_72603435/article/details/135381858
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。