uniapp中各种状态的按钮

发布时间:2023年12月26日

当涉及状态按钮时,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微信小程序--
文章来源:https://blog.csdn.net/m0_72603435/article/details/135212906
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。