• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 button 按钮

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
属性类型默认值必填说明最低版本
size string default 按钮的大小 1.0.0
type string default 按钮的样式类型 1.0.0
plain boolean false 按钮是否镂空,背景色透明 1.0.0
disabled boolean false 是否禁用 1.0.0
loading boolean false 名称前是否带 loading 图标 1.0.0
form-type string   用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 1.0.0
open-type string   微信开放能力 1.1.0
hover-class string button-hover 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果 1.0.0
hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 20 按住后多久出现点击态,单位毫秒 1.0.0
hover-stay-time number 70 手指松开后点击态保留时间,单位毫秒 1.0.0
lang string en 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 1.3.0
session-from string   会话来源,open-type="contact"时有效 1.4.0
send-message-title string 当前标题 会话内消息卡片标题,open-type="contact"时有效 1.5.0
send-message-path string 当前分享路径 会话内消息卡片点击跳转小程序路径,open-type="contact"时有效 1.5.0
send-message-img string 截图 会话内消息卡片图片,open-type="contact"时有效 1.5.0
app-parameter string   打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 1.9.5
show-message-card boolean false 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效 1.5.0
bindgetuserinfo eventhandle   用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效 1.3.0
bindcontact eventhandle   客服消息回调,open-type="contact"时有效 1.5.0
bindgetphonenumber eventhandle   获取用户手机号回调,open-type=getPhoneNumber时有效 1.2.0
binderror eventhandle   当使用开放能力时,发生错误的回调,open-type=launchApp时有效 1.9.5
bindopensetting eventhandle   在打开授权设置页后回调,open-type=openSetting时有效 2.0.7
bindlaunchapp eventhandle   打开 APP 成功的回调,open-type=launchApp时有效 2.4.4

size 的合法值

说明最低版本
default 默认大小  
mini 小尺寸  

type 的合法值

说明最低版本
primary 绿色  
default 白色  
warn 红色  

form-type 的合法值

说明最低版本
submit 提交表单  
reset 重置表单  

open-type 的合法值

说明最低版本
contact 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 (小程序插件中不能使用 1.1.0
share 触发用户转发,使用前建议先阅读使用指引 1.2.0
getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明 (小程序插件中不能使用 1.2.0
getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 (小程序插件中不能使用 1.3.0
launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5
openSetting 打开授权设置页 2.0.7
feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 2.1.0

lang 的合法值

说明最低版本
en 英文  
zh_CN 简体中文  
zh_TW 繁体中文  

 

下面举例子:

外观主要用到这几个属性:

button 标签
1 外观的属性
  1 size 控制按钮的大小
    1 default 默认大小
    2 mini 小尺寸


2 type 用来控制按钮的颜色
  1 default 灰色  (字体颜色是绿色)
  2 primary 绿色  (字体颜色是白色)
  3 warn 红色    (字体红色)

  3 plain 按钮是否镂空,背景色透明

  4 loading 文字前显示正在等待图标

 

运行:

<button size="default" type="default">default 按钮(type="default")</button>

<button size="mini" type="primary">mini 按钮(type="primary")</button>

<button size="default" type="warn">warn 按钮</button>

<button plain>镂空按钮</button>

<button loading >登录中</button>

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何快速搭建微信小程序发布时间:2022-07-18
下一篇:
微信小程序云开发环境的搭建发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap