购物网站开发的意义,一个网站3个相似域名,模拟网站平台怎么做,惠州做网站 百度优化先直接附上背景色渐变的滑动条slider uni-module插件地址#xff1a;https://ext.dcloud.net.cn/plugin?id16841
最近做的一个用uni-appvue2开发的微信小程序项目中要实现一个滑动进度控制条#xff0c;如下图所示#xff1a; 1. 滑动条需要渐变背景色
2. 滑块的背景色需…先直接附上背景色渐变的滑动条slider uni-module插件地址https://ext.dcloud.net.cn/plugin?id16841
最近做的一个用uni-appvue2开发的微信小程序项目中要实现一个滑动进度控制条如下图所示 1. 滑动条需要渐变背景色
2. 滑块的背景色需要与当前位置滑动条的背景色一致动态改变
碰到这样的需求我当然先是看看官方提供的slider组件和uView里的u-slider组件能不能满足。以下是这两个组件的官方文档。
slider组件官方文档slider | uni-app官网 (dcloud.net.cn)
u-slider组件官方文档Slider 滑动选择器 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)
大概看了下文档之后没有找到可以设置渐变背景的属性从而放弃了使用官方组件。 然后下一个想法就是去DCloud的插件市场。通过关键字‘slider’和‘背景渐变滑动条’搜索并没有找到想要的效果的插件。最后全网搜了下也没有找到合适的直接能拿来用的组件。作为一个vue和css新手,这是感到头皮发麻。没办法只有花点时间自己手撸一个出来正好也可以提升下uni-app小程序开发能力。终于通过2天时间的努力和各种尝试调试终于实现了设计效果一个的组件。
股掌。真实效果如下 简直完美。
为了让更多的小程序开发工作者提升开发效率我又重新封装了下把这个组件抽成了一个公共插件uni-module供大家免费使用。目前该插件是否支持vue3未知。
插件地址https://ext.dcloud.net.cn/plugin?id16841
欢迎大家前来下载如有改进需求可以提出后期我还会不断更新完善健壮插件功能。
插件介绍
gradient-slider
uni-app 背景色支持渐变的滑块区间选择组件
支持进度条和滑块的背景色、边框和宽高的自定义支持滑块当前位置的颜色值获取。
属性说明
属性名类型默认值说明valueNumber[0,100]滑块已选中区间的值minNumber0滑块区间最小值maxNumber100滑块区间最大值stepNumber1拖动时的步长blockWidthNumber20滑块宽度blockHeightNumber40滑块高度heightNumber20滑块进度条高度blockBackgroundString空滑块背景色允许为空为空时使用动态渐变色填充startColorString#F78C00滑块进度条起始颜色 注意必须使用HEX色值即#FFFFFFendColorString#FFFFFF滑块进度条末尾颜色 注意必须使用HEX色值即#FFFFFFborderNumber1滑块和进度条边框大小borderColorString#333333滑块和进度条边框颜色borderRadiusNumber8滑块和进度条边框圆角onColorChangedFunction滑块当前位置的颜色值获取
使用示例 gradient-slider onColorChangedonColorChanged classslider v-modelvalue6 start-color#ffffffend-color#0000ff border-color#aaaaaa border3 height20 block-width20/gradient-slider
