郑州高端网站定制,照片做视频ppt模板下载网站好,wordpress离线发布功能,网站建设方案后期服务当涉及状态按钮时#xff0c;UniApp提供了丰富的选择。UniApp中的状态按钮可以是开关按钮、单选按钮、多选按钮等。开发者可以根据具体需求选择使用合适的状态按钮组件。对于状态按钮#xff0c;UniApp提供了丰富的API和事件#xff0c;可以轻松实现状态切换、状态监听等功能…当涉及状态按钮时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(默认)、primary、success、info、warning、error通过plain值设置是否镂空通过hairline值设置是否细边通过disabled值设置是否禁用通过loading值设置是否开启加载图标loadingText设置加载中文字通过icon值设置是否显示图标通过shape值设置按钮形状circle为圆角通过color值设置按钮渐变颜色通过size值设置按钮的大小
templateview stylepadding: 20px;u-button typeprimary text确定/u-buttonu-button typeprimary :plaintrue text镂空/u-buttonu-button typeprimary :plaintrue :hairlinetrue text细边/u-buttonu-button typeprimary :disableddisabled text禁用/u-buttonu-button typeprimary loading loadingText加载中/u-buttonu-button typeprimary iconmap text图标按钮/u-buttonu-button typeprimary shapecircle text按钮形状/u-buttonu-button text渐变色按钮 colorlinear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))/u-buttonu-button typeprimary sizesmall text大小尺寸/u-button/view
/templatescript
export default {data() {return {disabled: true};}
};
/script定义需要用到的外部样式
针对非微信小程序平台组件的根元素就是uni-appbutton组件所以修改按钮的样式很容易直接给组件定义类名或者嵌入内联样式即可。如果是微信小程序编译后页面会有组件同名的元素存在导致样式传递有问题。如果是为了修改按钮与其他元素之间的距离或者宽度等可以给按钮外面套一个view元素控制这个view与其他元素的距离或者宽度即可达到同等效果。
所以我们提供了一个custom-style参数推荐用户可以用对象形式传递样式给组件内部注意驼峰命名。
templateview stylepadding: 20px;!-- 以下形式在微信小程序会无效APP和H5有效 --u-button classcustom-style text雪月夜/u-button/view
/templatescript
export default {data() {return {disabled: true,customStyle: {marginTop: 20px, // 注意驼峰命名并且值必须用引号包括因为这是对象color: red}};}
};
/scriptstyle langscss 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-typelaunchApp时有效 注只微信小程序、QQ小程序有效String---hoverStopPropagation指定是否阻止本节点的祖先节点出现点击态微信小程序有效默认 trueBooleantruefalse-lang指定返回用户信息的语言zh_CN 简体中文zh_TW 繁体中文en 英文Stringen--sessionFrom会话来源openTypecontact时有效String---sendMessageTitle会话内消息卡片标题openTypecontact时有效String---sendMessagePath会话内消息卡片点击跳转小程序路径openTypecontact时有效String---sendMessageImg会话内消息卡片图片openTypecontact时有效String---showMessageCard是否显示会话内消息卡片设置此参数为 true用户进入客服会话会在右下角显示可能要发送的小程序提示用户点击后可以快速发送小程序消息openTypecontact时有效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按钮颜色String在plaintrue镂空状态下颜色与边框保持一致否则为白色主题为info时为黑色#000000--color按钮颜色支持传入linear-gradient渐变色String---customStyle定义需要用到的外部样式,详细见上方文档Object---
#Events
说明目前经测试(Hbuilder X 2.6.8)在H5APP可以直接对组件监听tap事件等同组件内部发出的click事件效果某些HX版本上 微信小程序对组件使用tap事件可能无效故建议对按钮组件的点击事件监听统一使用组件内部发出的click事件。
属性名说明类型默认值可选值平台差异说明click按钮点击请勿使用tap点击事件微信小程序无效返回值为点击事件及参数Handler---getphonenumberopen-typegetPhoneNumber时有效Handler微信小程序--getuserinfo用户点击该按钮时会返回获取到的用户信息从返回参数的detail中获取到的值同uni.getUserInfoHandler微信小程序--error当使用开放能力时发生错误的回调Handler微信小程序--opensetting在打开授权设置页并关闭后回调Handler微信小程序--launchapp打开 APP 成功的回调Handler微信小程序--
