uView Slider 滑动选择器

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

说明

该组件在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>

copy

#设置最大和最小值

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

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

copy

#设置步进值

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

提示

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

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

copy

#禁用状态

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

copy

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

  • 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>

copy

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

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

其他更多参数详见底部API

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/743485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

字符串和字节的使用

字符串和字节的使用 学习目标&#xff1a; 了解 常见字符以及字符集掌握 str&#xff0c;bytes以及互相转换的方法 1 字符、字符集 字符(Character)是各种文字和符号的总称&#xff0c;包括各国家文字、标点符号、图形符号、数字等 字符集(Character set)是多个字符的集合 …

【LeetCode热题100】73. 矩阵置零(矩阵)

一.题目要求 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 二.题目难度 中等 三.输入样例 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0…

2024考研计算机考研复试-每日重点(第二十期)

公众号“准研计算机复试”&#xff0c;超全大佬复试资料&#xff0c;保姆级复试&#xff0c;80%的题目都是上岸大佬提供的。 研宝们&#xff0c;App更新啦&#xff01; 计算机组成原理&#xff1a; 10.☆什么是数据存储的大端模式和小端模式&#xff1f; 大端模式&#xff1a;数…

github拉取项目找不到前端代码

今天从github上拉取了一个项目&#xff0c;使用docker部署在了服务器上&#xff0c; 代码正常运行&#xff0c;但是想在下载的项目中找前端代码遇到了问题&#xff0c;项目结构中的template模板只有一个页面&#xff0c;于是查看nginx配置文件 查看index.html 引入了一些js文件…

c++11 标准模板(STL)(std::locale)(四)返回 locale 的名称

用以封装文化差异的多态刻面的集合 std::locale 类型对象是不可变平面的不可变索引集。 C 输入/输出库的每个流对象与一个 std::locale 对象关联&#xff0c;并用其平面分析及格式化所有数据。另外&#xff0c; locale 对象与每个 std::basic_regex 对象关联。 locale 对象亦可…

使用Julia及R语言生成正态分布的随机数字并写入CSV文件

在操作之前需要先下载Julia的Distributions包&#xff0c;这个包用于进行相关概率分布的函数调用。 在输入 ] 进入Julia包管理模式后输入&#xff1a; add Distributions 这里我使用我们自己实验室的实测数据 &#xff0c;平均值0.67&#xff0c;方差0.11&#xff0c;数据分…

聚氨酯封孔剂因为热爱

忙忙碌碌又一天,对每个顾客都用心服务,因为热爱,所以不辛苦,因为热爱,即使无数遍的重复也不会厌倦。 聚氨酯封孔材料的主要性能特点&#xff1a; 1、粘度低&#xff0c;易渗入微小裂隙&#xff1b; 2、粘合能力很强&#xff0c;具有持久强粘结性&#xff1b; 3、柔韧性.越&am…

HCIP —— BGP 路径属性 (上)

目录 BGP 路径属性 1.优选Preferred-Value属性值最大的路由 2.优选Local-preference 属性数值大的路由 3.本地始发的BGP路由优先于其他对等体处学习到的路由。 4..优选AS_PATH属性值最短的路由 BGP 路径属性 BGP的路由选路是存在优选规则的&#xff0c;下图为华为官网提供…

2 配置虚拟机

1.打开VM&#xff0c;主页的界面如下&#xff0c;点击"创建新的虚拟机" 2.选择“自定义&#xff08;高级&#xff09;”&#xff0c;然后点击下一步&#xff0c;如下图所示&#xff1a; 3.下图直接点击“下一步” 4.下图的界面上&#xff0c;注意&#xff0c;不要选择…

用python实现人生重开模拟器游戏

人生重开模拟器是一款非常有趣的游戏&#xff0c;它让玩家能够模拟人生的各种可能性和选择。在Python中实现这个游戏&#xff0c;我们可以采用文本界面的形式&#xff0c;并使用随机数来模拟人生的不同事件。 以下是一个简化版的人生重开模拟器的Python实现&#xff1a; pytho…

3.11笔记2

目前使用的格里高利历闰年的规则如下&#xff1a; 公元年分非4的倍数&#xff0c;为平年。公元年分为4的倍数但非100的倍数&#xff0c;为闰年。公元年分为100的倍数但非400的倍数&#xff0c;为平年。公元年分为400的倍数为闰年。 请用一个表达式 (不能添加括号) 判断某一年…

【STL】stack栈容器与list链表容器

1.栈stack 栈具有先进后出的特性&#xff0c;最先进入的数据压在最底下&#xff0c;最后出来 2.list链表容器 list链表容器是一种双向链表&#xff0c;两端都可插入与删除&#xff0c;是双向访问迭代器&#xff0c;与vertor随机访问迭代器有不同的区别 reverse&#xff08;&…

蓝桥杯-质因数问题

约数&#xff0c;又称因数&#xff1a;a % b 0,则b称为a的约数&#xff0c;包括1和a。 例如4的正约数有&#xff1a;1、2、4。6的正约数有&#xff1a;1、2、3、6。质因数&#xff1a; 质因数&#xff08;素因数或质因子&#xff09;在数论里是指能整除给定正整数&#xff08;…

基于SpringBoot+MYSQL+Vue的校园管理系统

目录 1、前言介绍 2、主要技术 3、系统流程分析 3.1、操作流程 3.2、添加信息流程 3.3、删除信息流程 4、系统设计 4.1 系统体系结构 4.2开发流程设计 4.3 数据库设计原则 4.4 数据表 5、运行截图(部分) 5.1管理员功能模块 5.2用户功能模块 5.3院校管理员功能模块…

SpringCloudGateway网关服务搭建

目录 创建项目 配置项目 配置路由 启动类配置 运行和测试

java-房屋信息网系统-209-(代码+说明)

转载地址: http://www.3q2008.com/soft/search.asp?keyword房屋信息网系统 本课题所确立的框架主要分为&#xff1a; 1、房屋信息发布。 发布房屋的信息包括新房信息、买卖房信息、二手房信息以及出租房屋的信息等。 2、房屋信息交流区。 提供一个给用户自由交流的一个空间。…

three.js 鼠标左右拖动改变玩家视角

这里主要用到了 一个方法 obj.getWorldDirection(); obj.getWorldDirection()表示的获取obj对象自身z轴正方向在世界坐标空间中的方向。 按下 W键前进运动&#xff1b; <template><div><el-container><el-main><div class"box-card-left…

bdd100k数据集格式转coco格式

最近在学习使用mmdetection&#xff0c;需要使用bdd100k数据集来训练网络&#xff0c;但是官网下载的数据集格式不是coco数据集&#xff0c;得自己转换数据集格式。 文章目录 一、bdd100k数据集下载二、bdd100k转coco脚本下载三、脚本使用 一、bdd100k数据集下载 数据集下载地…

UDP通讯测试

参考资料&#xff1a;UNIX网络编程 实验平台&#xff1a;PC为client&#xff0c;RaspberryPi为server 基本类型和接口函数&#xff0c;参考man手册 #include <sys/socket.h>struct sockaddr {sa_family_t sa_family; /* Address family */char sa_d…

Docker 笔记(五)--链接

这篇笔记记录了Docker 的Link。 官方文档&#xff1a; Legacy container links - Communication across links 目录 参考Legacy container linksConnect using network port mappingConnect with the linking systemThe importance of naming Communication across linksEnviro…