【uni-app小程序开发】实现一个背景色渐变的滑动条slider
先直接附上背景色渐变的滑动条slider uni-module插件地址:https://ext.dcloud.net.cn/plugin?id=16841
最近做的一个用uni-app+vue2开发的微信小程序项目中要实现一个滑动进度控制条,如下图所示:

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?id=16841
欢迎大家前来下载,如有改进需求可以提出,后期我还会不断更新完善,健壮插件功能。
插件介绍
gradient-slider
uni-app 背景色支持渐变的滑块区间选择组件
支持进度条和滑块的背景色、边框和宽高的自定义,支持滑块当前位置的颜色值获取。
属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | Number | [0,100] | 滑块已选中区间的值 |
| min | Number | 0 | 滑块区间最小值 |
| max | Number | 100 | 滑块区间最大值 |
| step | Number | 1 | 拖动时的步长 |
| blockWidth | Number | 20 | 滑块宽度 |
| blockHeight | Number | 40 | 滑块高度 |
| height | Number | 20 | 滑块进度条高度 |
| blockBackground | String | 空 | 滑块背景色,允许为空,为空时使用动态渐变色填充 |
| startColor | String | #F78C00 | 滑块进度条起始颜色 注意:必须使用HEX色值,即#FFFFFF |
| endColor | String | #FFFFFF | 滑块进度条末尾颜色 注意:必须使用HEX色值,即#FFFFFF |
| border | Number | 1 | 滑块和进度条边框大小 |
| borderColor | String | #333333 | 滑块和进度条边框颜色 |
| borderRadius | Number | 8 | 滑块和进度条边框圆角 |
| onColorChanged | Function | 滑块当前位置的颜色值获取 |
使用示例
<gradient-slider @onColorChanged="onColorChanged" class="slider" v-model="value6" start-color="#ffffff"end-color="#0000ff" border-color="#aaaaaa" border="3" height="20" block-width="20"></gradient-slider>相关文章:
【uni-app小程序开发】实现一个背景色渐变的滑动条slider
先直接附上背景色渐变的滑动条slider uni-module插件地址:https://ext.dcloud.net.cn/plugin?id16841 最近做的一个用uni-appvue2开发的微信小程序项目中要实现一个滑动进度控制条,如下图所示: 1. 滑动条需要渐变背景色 2. 滑块的背景色需…...
Claude3横空出世:颠覆GPT-4,Anthropic与亚马逊云科技共启AI新时代
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...
【AI视野·今日NLP 自然语言处理论文速览 第八十三期】Wed, 6 Mar 2024
AI视野今日CS.NLP 自然语言处理论文速览 Wed, 6 Mar 2024 Totally 74 papers 👉上期速览✈更多精彩请移步主页 Daily Computation and Language Papers MAGID: An Automated Pipeline for Generating Synthetic Multi-modal Datasets Authors Hossein Aboutalebi, …...
【AI视野·今日Robot 机器人论文速览 第八十二期】Tue, 5 Mar 2024
AI视野今日CS.Robotics 机器人学论文速览 Tue, 5 Mar 2024 Totally 63 papers 👉上期速览✈更多精彩请移步主页 Interesting: 📚双臂机器人拧瓶盖, (from 伯克利) website: https://toruowo.github.io/bimanual-twist 📚水下抓取器, (from …...
流量分析-webshell管理工具
文章目录 CSCS的工作原理CS流量特征 菜刀phpJSPASP 蚁剑冰蝎哥斯拉 对于常见的webshell管理工具有中国菜刀,蚁剑,冰蝎,哥斯拉。同时还有渗透工具cobaltstrike(CS)。 CS CobaltStrike有控制端,被控端,服务端。(相当于黑…...
备考2025年AMC8数学竞赛:吃透2000-2024年600道AMC8真题就够
我们继续来随机看五道AMC8的真题和解析,根据实践经验,对于想了解或者加AMC8美国数学竞赛的孩子来说,吃透AMC8历年真题是备考最科学、最有效的方法之一。 即使不参加AMC8竞赛,吃透了历年真题600道和背后的知识体系,那么…...
基于鹦鹉优化算法(Parrot optimizer,PO)的无人机三维路径规划(提供MATLAB代码)
一、无人机路径规划模型介绍 无人机三维路径规划是指在三维空间中为无人机规划一条合理的飞行路径,使其能够安全、高效地完成任务。路径规划是无人机自主飞行的关键技术之一,它可以通过算法和模型来确定无人机的航迹,以避开障碍物、优化飞行…...
linux Shell 命令行-02-var 变量
拓展阅读 linux Shell 命令行-00-intro 入门介绍 linux Shell 命令行-02-var 变量 linux Shell 命令行-03-array 数组 linux Shell 命令行-04-operator 操作符 linux Shell 命令行-05-test 验证是否符合条件 linux Shell 命令行-06-flow control 流程控制 linux Shell 命…...
C#MQTT编程10--MQTT项目应用--工业数据上云
1、文章回顾 这个系列文章已经完成了9个内容,由浅入深地分析了MQTT协议的报文结构,并且通过一个有效的案例让伙伴们完全理解理论并应用到实际项目中,这节继续上马一个项目应用,作为本系列的结束,奉献给伙伴们&#x…...
exceljs解析和生成excel文件
安装 npm install exceljs解析excel 通过 Workbook 的 readFile 方法可以拿到workbook对象, workbook对象包含的概念有 worksheet(工作表) --> row(行) --> cell(单元格).于是可以通过依次遍历 worksheet, row, cell来拿到单元格的数据直接通过 worksheet.getSheetValue…...
HCIP —— BGP 路径属性 (上)
目录 BGP 路径属性 1.优选Preferred-Value属性值最大的路由 2.优选Local-preference 属性数值大的路由 3.本地始发的BGP路由优先于其他对等体处学习到的路由。 4..优选AS_PATH属性值最短的路由 BGP 路径属性 BGP的路由选路是存在优选规则的,下图为华为官网提供…...
NIO学习总结(二)——Selector、FileLock、Path、Files、聊天室实现
一、Selector 1.1 Selector简介 1.1.1 Selector 和 Channel的关系 Selector 一般称为选择器 ,也可以翻译为 多路复用器 。 它是 Java NIO 核心组件中的一个,用于检查一个或多个 NIO Channel(通道)的状态是否处于可读、可写。由…...
面试经典150题(111-113)
leetcode 150道题 计划花两个月时候刷完之未完成后转,今天(第5天)完成了3道(111-113)150 111.(172. 阶乘后的零)题目描述: 给定一个整数 n ,返回 n! 结果中尾随零的数量。 提示 n! n * (n - 1…...
iOS17.4获取UDID安装mobileconfig描述文件失败 提示“安全延迟进行中”问题 | 失窃设备保护
iOS17.4这两天已经正式发布, 在iOS 17.4版本中新增了一个名为"失窃设备保护"的功能,并提供了一个"需要安全延迟"的选项。 iOS17.4获取UDID安装mobileconfig描述文件失败 提示“安全延迟进行中”问题 | 失窃设备保护 当用户选择启用…...
List--splice使用技巧
splice : 拼接两个list api: void dump(list<int>& li) {for(auto & i :li)cout<<i<< " ";cout<<endl; } int main() { list<int> li1 {1,3,5};list<int> li2 {2,4,6}; }1 c.splice(pos,c2); // li的开头插入li2链表…...
【最新版】ChatGPT/GPT4科研应用与AI绘图论文写作(最新增加Claude3、Gemini、Sora、GPTs技术及AI领域中的集中大模型的最新技术)
2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…...
离线数仓(六)【ODS 层开发】
前言 1、ODS 层开发 ODS层的设计要点如下: (1)ODS层的表结构设计依托于从业务系统同步过来的数据结构(JSON/CSV/TSV)。 (2)ODS层要保存全部历史数据,故其压缩格式应选择高压缩比的…...
PPT只要出现弹窗就闪退,Word和Excel都是正常的
1. 问题描述 PPT在常规使用下,能进行正常编辑和保存,但在使用过程中出现弹窗,类似于报错或者打开文件选项就会出现闪退,或者在添加新建页时选用右键添加时也会出现闪退。 找了很久的办法,才得到解决。记录一下。 2.…...
21、电源管理入门之芯片设计中的电源管理
目录 1. 关于PCSA和SCP 2. 关于PSCI和SCMI 3. 关于芯片SoC设计中的一些要点 参考: 这里以ARM为例来进行说明,我们在做驱动软件的时候,就需要跟硬件SoC里面的IP打交道,通过操作寄存器来实现硬件功能。之前的文章:ARM SCP入门-AP与SCP通信中3和4章节已经进行了简单介绍,…...
电脑打字突然变成繁体字如何修改
1. 右键电脑右下角的“中”字 2. 点击字符集,选中简体即可 有用的话记得给我点个赞啊~ 靴靴!...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...
