当前位置: 首页 > news >正文

uniapp中各种状态的按钮

当涉及状态按钮时,UniApp提供了丰富的选择。UniApp中的状态按钮可以是开关按钮、单选按钮、多选按钮等。开发者可以根据具体需求选择使用合适的状态按钮组件。对于状态按钮,UniApp提供了丰富的API和事件,可以轻松实现状态切换、状态监听等功能。

在UniApp中,状态按钮的使用非常简单。只需要在template中引入相应的组件,设置好相应的属性和事件即可。例如,对于开关按钮,可以使用uni-switch组件;对于单选按钮,可以使用uni-radio组件;对于多选按钮,可以使用uni-checkbox组件等。通过设置不同的属性和事件监听,可以实现各种状态按钮的功能。

除了基本的状态按钮组件外,UniApp还提供了丰富的插件和扩展组件,例如uni-icons、uni-badge等,可以进一步丰富状态按钮的样式和功能。开发者可以根据自己的需求选择合适的组件,快速构建出符合设计需求的状态按钮。

基本使用:

文字内容通过text传入

<u-button text="月落"></u-button>

设置按钮的多种形态

  • type值可选的有default(默认)、primarysuccessinfowarningerror
  • 通过plain值设置是否镂空
  • 通过hairline值设置是否细边
  • 通过disabled值设置是否禁用
  • 通过loading值设置是否开启加载图标,loadingText设置加载中文字
  • 通过icon值设置是否显示图标
  • 通过shape值设置按钮形状,circle为圆角
  • 通过color值设置按钮渐变颜色
  • 通过size值设置按钮的大小
<template><view style="padding: 20px;"><u-button type="primary" text="确定"></u-button><u-button type="primary" :plain="true" text="镂空"></u-button><u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button><u-button type="primary" :disabled="disabled" text="禁用"></u-button><u-button type="primary" loading loadingText="加载中"></u-button><u-button type="primary" icon="map" text="图标按钮"></u-button><u-button type="primary" shape="circle" text="按钮形状"></u-button><u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button><u-button type="primary" size="small" text="大小尺寸"></u-button></view>
</template><script>
export default {data() {return {disabled: true};}
};
</script>

定义需要用到的外部样式

  1. 针对非微信小程序平台,组件的根元素就是uni-appbutton组件,所以修改按钮的样式很容易,直接给组件定义类名或者嵌入内联样式即可。
  2. 如果是微信小程序,编译后页面会有组件同名的元素存在,导致样式传递有问题。
  3. 如果是为了修改按钮与其他元素之间的距离或者宽度等,可以给按钮外面套一个view元素,控制这个view与其他元素的距离或者宽度,即可达到同等效果。

所以:我们提供了一个custom-style参数,推荐用户可以用对象形式传递样式给组件内部,注意驼峰命名。

<template><view style="padding: 20px;"><!-- 以下形式在微信小程序会无效,APP和H5有效  --><u-button class="custom-style" text="雪月夜"></u-button></view>
</template><script>
export default {data() {return {disabled: true,customStyle: {marginTop: '20px', // 注意驼峰命名,并且值必须用引号包括,因为这是对象color: 'red'}};}
};
</script><style lang="scss" scoped>.custom-style {color: #ff0000;width: 400rpx;}
</style>

总的来说,UniApp中各种状态按钮的使用非常灵活,开发者可以根据自己的需求选择合适的组件和配置,快速实现各种状态按钮的功能。UniApp提供了丰富的API和事件,可以轻松实现状态按钮的各种功能,为开发者提供了极大的便利。

API

#Props

属性名说明类型默认值可选值平台差异说明
hairline是否显示按钮的细边框Booleantruefalse-
type按钮的样式类型Stringinfoinfo / primary / error/ warning / success-
size按钮的大小Stringnormallarge / mini-
shape按钮外观形状,见上方说明Stringsquarecircle-
plain按钮是否镂空,背景色透明Booleanfalsetrue-
disabled是否禁用Booleanfalsetrue-
loading按钮名称前是否带 loading 图标BooleanfalsetrueApp-nvue 平台,在 ios 上为雪花,Android上为圆圈
loadingText加载中提示文字String---
loadingMode加载状态图标类型Stringspinner--
loadingSize加载图标大小String | Number15--
openType开放能力,具体请看uniapp稳定关于button组件部分说明String---
formType用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件String---
appParameter打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 (注:只微信小程序、QQ小程序有效)String---
hoverStopPropagation指定是否阻止本节点的祖先节点出现点击态,微信小程序有效(默认 true)Booleantruefalse-
lang指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文Stringen--
sessionFrom会话来源,openType="contact"时有效String---
sendMessageTitle会话内消息卡片标题,openType="contact"时有效String---
sendMessagePath会话内消息卡片点击跳转小程序路径,openType="contact"时有效String---
sendMessageImg会话内消息卡片图片,openType="contact"时有效String---
showMessageCard是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,openType="contact"时有效String---
dataName额外传参参数,用于小程序的data-xxx属性,通过target.dataset.name获取String---
throttleTime节流,一定时间内只能触发一次,单位毫秒String | Number0--
hoverStartTime按住后多久出现点击态,单位毫秒String | Number0--
hoverStayTime手指松开后点击态保留时间,单位毫秒String | Number200--
text按钮文字,之所以通过props传入,是因为slot传入的话(注:nvue中无法控制文字的样式)String | Number---
icon按钮图标String---
iconColor按钮颜色Stringplain=true镂空状态下,颜色与边框保持一致,否则为白色(主题为info时为黑色#000000)--
color按钮颜色,支持传入linear-gradient渐变色String---
customStyle定义需要用到的外部样式,详细见上方文档Object---

#Events

说明:目前经测试(Hbuilder X 2.6.8),在H5,APP,可以直接对组件监听tap事件,等同组件内部发出的click事件效果,某些HX版本上, 微信小程序对组件使用tap事件可能无效,故建议对按钮组件的点击事件监听统一使用组件内部发出的click事件。

属性名说明类型默认值可选值平台差异说明
click按钮点击,请勿使用@tap点击事件,微信小程序无效,返回值为点击事件及参数Handler---
getphonenumberopen-type="getPhoneNumber"时有效Handler微信小程序--
getuserinfo用户点击该按钮时,会返回获取到的用户信息,从返回参数的detail中获取到的值同uni.getUserInfoHandler微信小程序--
error当使用开放能力时,发生错误的回调Handler微信小程序--
opensetting在打开授权设置页并关闭后回调Handler微信小程序--
launchapp打开 APP 成功的回调Handler微信小程序--

相关文章:

uniapp中各种状态的按钮

当涉及状态按钮时&#xff0c;UniApp提供了丰富的选择。UniApp中的状态按钮可以是开关按钮、单选按钮、多选按钮等。开发者可以根据具体需求选择使用合适的状态按钮组件。对于状态按钮&#xff0c;UniApp提供了丰富的API和事件&#xff0c;可以轻松实现状态切换、状态监听等功能…...

模式识别与机器学习-判别式分类器

模式识别与机器学习-判别式分类器 生成式模型和判别式模型的区别线性判别函数多分类情况多分类情况1多分类情况2多分类情况3 例题 广义线性判别函数实例 分段线性判别函数Fisher线性判别感知机算法例&#xff1a;感知机多类别分类 谨以此博客作为学习期间的记录 生成式模型和判…...

c++11 标准模板(STL)(std::pair)(七)访问 pair 的一个元素

定义于头文件 <utility> std::pair 是一个结构体模板&#xff0c;其可于一个单元存储两个相异对象。 pair 是 std::tuple 的拥有两个元素的特殊情况。 访问 pair 的一个元素 std::get(std::pair) template< size_t I, class T1, class T2 > typename std::tuple…...

IP 地址归属地查询

IP 地址归属地查询 1. IP 地址归属地查询2. IP 地址归属地查询References 1. IP 地址归属地查询 https://tool.lu/ip/index.html 2. IP 地址归属地查询 https://www.ip.cn/ip/.html References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/...

实战经验分享:在Java中灵活应用Excel注释和批注

本文由葡萄城技术团队原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 注释及批注是 Excel 中比较常用的功能&#xff0c;注释往往针对单元格&#xff0c;起到解释说明的作用&a…...

AUTOSAR从入门到精通-车载以太网(三)

目录 前言 原理 车载以太网总体架构 物理层 数据链路层 以太网帧格式<...

【自然语言处理】用Python从文本中删除个人信息-第二部分

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…...

设计模式之-中介者模式,快速掌握中介者模式,通俗易懂的讲解中介者模式以及它的使用场景

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…...

12.25

led.c #include "led.h" void all_led_init() {RCC_GPIO | (0X3<<4);//时钟使能GPIOE_MODER &(~(0X3<<20));//设置PE10输出GPIOE_MODER | (0X1<<20);//设置PE10为推挽输出GPIOE_OTYPER &(~(0x1<<10));//PE10为低速输出GPIOE_OSPEED…...

MySQL5.7的几种安装方式总结(排错踩坑呕心沥血的经历)

包安装 添加国内源&#xff1a;mysql | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 注意&#xff1a;5.7安装之后有一个临时密码&#xff0c;进行登录并修改新密码后才可以对mysql进行操作。 可以yun list看看各个系统光盘自带的都是什么版本&…...

zookeeper基本使用

目录 环境搭建 单机版搭建 集群版搭建 基本语法使用 可视化客户端 数据结构 节点分类 1. 持久节点 2. 临时节点 3. 有序节点 4. 容器节点 5. TTL节点 节点状态 监听机制 watch监听 永久性watch 应用场景 1. 实现分布式锁 2. 乐观锁更新数据 应用场景总结 选…...

【华为机试】2023年真题B卷(python)-分月饼

一、题目 题目描述&#xff1a; 中秋节公司分月饼&#xff0c;m个员工&#xff0c;买了n个月饼&#xff0c;m<n&#xff0c;每个员工至少分1个月饼&#xff0c;但可以分多个&#xff0c;单人份到最多月饼的个数为Max1&#xff0c;单人分到第二多月饼的个数是Max2&#xff0c…...

EtherCAT主站SOEM -- 11 -- EtherCAT从站 XML 文件解析

EtherCAT主站SOEM -- 11 -- EtherCAT从站 XML 文件解析 1 EtherCAT 从站信息规范1.1 XML 文件说明1.1.1 XML 数据类型1.1.2 EtherCATInfo1.1.3 Groups1.1.4 Devices1.1.5 Modules1.1.6 Types1.1.6.1 AccessType 的组成1.1.6.2 ArraylnfoType 的组成1.1.6.3 DeviceType 的组成1.…...

YOLOv5算法改进(23)— 更换主干网络GhostNet + 添加CA注意力机制 + 引入GhostConv

前言:Hello大家好,我是小哥谈。本节课就让我们结合论文来对YOLOv5进行组合改进(更换主干网络GhostNet + 添加CA注意力机制 + 引入GhostConv),希望同学们学完本节课可以有所启迪,并且后期可以自行进行YOLOv5算法的改进!🌈 前期回顾: YOLOv5算法改进(1)— 如何去…...

centos系统部署rancher1.6版本并部署服务

1. centos上部署docker. 请参考 博客 2. 用docker安装rancher1.6 sudo docker run -d -v /mnt/rancher/db:/var/lib/mysql --restartunless-stopped -p 8080:8080 rancher/server3.浏览器登录做设置 3.1 浏览器打开 1.117.92.32:8080 #直接就登录了 3.2 第一次进入&am…...

Matlab实时读取串口数据并实时画图方法

** Matlab实时读取串口数据并实时画图方法 ** 按照数据串口协议如&#xff1a;$KT2,1.80,88.18,39.54,42.86,LO[0.72,-1.04,0.35]&#xff0c;举例。 s serialport("COM12",115200,"Timeout",5); poszeros(100000,3); j1; data1 read(s,1,"uint8&…...

智能优化算法应用:基于向量加权平均算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于向量加权平均算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于向量加权平均算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.向量加权平均算法4.实验参数设定…...

SpringBoot - Maven 打包合并一个胖 JAR 以及主项目 JAR 依赖 JAR 分离打包解决方案

问题描述 <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.1.18.RELEASE</version><configuration><!--<classifier>exec</classifier>--…...

react 18 Hooks扩展函数式组件的状态管理

React函数式组件 特点 React函数式组件具有以下特点&#xff1a; 简洁&#xff1a;使用函数的方式定义组件&#xff0c;语法简单直观。无状态&#xff1a;函数式组件没有内部状态&#xff08;state&#xff09;&#xff0c;只依赖于传入的props。可复用&#xff1a;函数式组…...

智能优化算法应用:基于浣熊算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于浣熊算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于浣熊算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.浣熊算法4.实验参数设定5.算法结果6.参考文献7.MA…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...