【uni-app小程序开发】实现一个背景色渐变的滑动条slider

news/2024/7/10 2:21:48 标签: uni-app, 小程序, 前端, vue

最近做的一个用uni-app+vue2开发的微信小程序项目中要实现一个滑动进度控制条,如下图所示:

image.png

1. 滑动条需要渐变背景色

2. 滑块的背景色需要与当前位置滑动条的背景色一致(动态改变)

碰到这样的需求,我当然先是看看官方提供的slider组件和uView里的u-slider组件能不能满足。以下是这两个组件的官方文档。

slider组件官方文档:slider | uni-app官网 (dcloud.net.cn)

u-slider组件官方文档:Slider 滑动选择器 | uView 2.0 - 全面兼容 nvueuni-app 生态框架 - uni-app UI 框架 (uviewui.com)

大概看了下文档之后,没有找到可以设置渐变背景的属性,从而放弃了使用官方组件。
然后下一个想法就是去DCloud的插件市场。通过关键字‘slider’和‘背景渐变滑动条’搜索,并没有找到想要的效果的插件。最后全网搜了下也没有找到合适的直接能拿来用的组件。作为一个vue和css新手,这是感到头皮发麻。没办法,只有花点时间自己手撸一个出来,正好也可以提升下uni-app小程序开发能力。终于通过2天时间的努力和各种尝试调试,终于实现了设计效果一个的组件。


http://www.niftyadmin.cn/n/5413472.html

相关文章

Python模块百科_操作系统接口_os【二】

Python模块百科_操作系统接口_os【二】 os --- 多种操作系统接口【第一部分】一、相关模块1.1 os.path 文件路径1.2 fileinput 文件读取1.3 tempfile 临时文件和目录1.4 shutil 高级文件和目录1.5 platform 操作系统底层模块 二、关于函数适用性的说明2.1 与操作系统相同的接口…

青创智通:工业互联网(IOT)的发展趋势

​随着科技的不断发展,物联网(IoT)已经逐渐成为人们生活中不可或缺的一部分。IoT是指通过互联网将各种物品连接起来,实现智能化管理和控制的一种技术。随着物联网技术的不断发展,它的应用范围和影响力也在不断扩大。本…

Koa: 打造高效、灵活的Node.js后端 (介绍与环境部署)

在上一篇文章中,我们了解了Node.js的基础知识,今天我们将进一步学习Node.js 较新的一个轻量级Web框架Koa,一起创建NodeJS后端服务器吧! 一、介绍 Koa是一个新生代Node.js Web框架,由Express原团队成员开发&#xff0c…

Java——正则表达式详解

目录 Java正则表达式1、正则表达式语法1.1、基本的元字符1.2、数量元字符1.3、位置元字符1.4、特殊字符元字符1.5、回溯引用和前后查找1.6、大小写转换1.7、匹配模式 2、Java中的正则表达式2.1、概述2.2、获取匹配位置2.3、捕获组 3、匹配单个字符3.1、匹配纯文本3.2、匹配任意…

selenium也能过某数、5s盾..

文章转载于:selenium也能过某数、5s盾… 直接安装: pip install undetected_chromedriver运行代码: import undetected_chromedriver as uc import timedriver uc.Chrome(executable_pathrC:\Users\chromedriver.exe,version_main111) driver.get(网…

【RabbitMQ】WorkQueue

📝个人主页:五敷有你 🔥系列专栏:MQ ⛺️稳中求进,晒太阳 Work Queues Work queues任务模型,简单来说就是让多个消费者绑定到一个队列,共同消费队列中的消息 当消息处理比较耗时的时候&…

『大模型笔记』LLM框架(LangChain、LlamaIndex、Haystack、Hugging Face)哪一个是满足您特定需求的最佳选择?

LLM框架(LangChain、LlamaIndex、Haystack、Hugging Face)哪一个是满足您特定需求的最佳选择? 文章目录 1. LangChain1.1. 优势1.2. 劣势1.1. 理想用例 2. LlamaIndex2.1. 优势2.2. 劣势2.3. 理想用例 3. Haystack3.1. 优势3.2. 劣势3.3. 理想用例 4. Hugging Face…

谷歌开源的LLM大模型 Gemma 简介

相关链接: Hugging face模型下载地址:https://huggingface.co/google/gemma-7bGithub地址:https://github.com/google/gemma_pytorch论文地址:https://storage.googleapis.com/deepmind-media/gemma/gemma-report.pdf官方博客&…