网站代码需要注意什么问题,编程网站排名,网站开发流程图和介绍,设计派官网该组件一般用于表单中#xff0c;手动选择一个区间范围的场景。
说明
该组件在H5#xff0c;微信小程序和APP-VUE等平台上使用了WXS技术#xff0c;在NVUE平台使用了BindingX技术#xff0c; 故在滑动过程中可以获得细腻流畅的跟随效果。
#平台差异说明
App#xff08…该组件一般用于表单中手动选择一个区间范围的场景。
说明
该组件在H5微信小程序和APP-VUE等平台上使用了WXS技术在NVUE平台使用了BindingX技术 故在滑动过程中可以获得细腻流畅的跟随效果。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
需要通过v-model绑定一个值来初始化滑块的选择值(0到100之间)这个值是双向绑定的您可以通过这个值实时地得知内部的滑动结果。
templateu-slider v-modelvalue/u-slider
/templatescriptexport default {data() { return {value: 30}}}
/scriptcopy
#设置最大和最小值
通过min和max可以设置滑块所能选择的最大和最小值
u-slider v-modelvalue min30 max80/u-slidercopy
#设置步进值
通过step参数设置步进值这个步进值为每次跳变的值具体表现请见示例。
提示
需要注意的是这个step必须要被max值整除否则会出现无法无法滑动到最大值的情况
u-slider v-modelvalue step20 min30 max100/u-slidercopy
#禁用状态
u-slider v-modelvalue disabled/u-slidercopy
#自定义按钮的内容和样式
activeColor设置进度条的激活部分颜色inactiveColor进度条的激活部分颜色inactiveColor进度条的背景颜色blockColor滑块的背景颜色blockStyle用户对滑块的自定义样式(颜色)
templateu-slider v-modelvalue activeColor#3c9cff inactiveColor#c0c4cc/u-slider
/templatescriptexport default {data() { return {value: 30}}}
/scriptcopy
#自定义滑动选择器整体的样式
通过inactive-color配置底部滑动条背景颜色通过active-color配置底部选择部分的背景颜色通过block-width配置滑块宽度(高等于宽)通过block-color配置滑动按钮按钮的颜色通过height配置滑块条高度单位rpx
其他更多参数详见底部API
u-slider v-modelvalue block-width40 block-colorred/u-slider
