美文网首页
WeChat小程序表单篇~button

WeChat小程序表单篇~button

作者: 王怀智 | 来源:发表于2018-05-10 10:47 被阅读267次

button按钮

解释:

小程序的button按钮,常用于与用户交互使用。

属性:

button属性

属性名 类型 默认值 说明 注释
size String default 按钮的大小 类型String,不是Number 只有default、mini,下文有解释
type String default 按钮展示的样式 下文有解释
plain Boolean false 按钮是否镂空,背景色透明
disabled Boolean false 按钮是否禁用,不可点击
loading Boolean false 名称前是否带loading图标
----以上为常用----
form-type String 用于form组件的按钮(submit/reset) 下文有解释
open-type String 微信开发能力(分享,获取用户信息,客服聊天)
---button动作----
hover-class String button-hover 按钮按下去的样式类,当hover-class="none",没有点击效果
hover-stop-propagation Boolean false 阻止父节点出现点击态
hover-start-time Number 20 按住多久出现点击态,(毫秒)
hover-stay-time Number 20 松开后点击保留时间,(毫秒)
size有效值
说明
default 默认值
mini
type有效值
说明
primary 原色值
default 默认值
warn 警告值
form-type有效值
说明
submit 提交表单
reset 重置表单
open-type有效值
说明
contact 打开客服,需要小程序后台配置
share 打开分享面板
getUserInfo 可以在bindgetuserinfo中回调获取用户信息
getPhoneNumber 可以在bindgetphonenumber回调中获取用户信息
launchApp 打开App 可以通过app-parameter属性设置向app传的参数

展示

button展示效果

使用:

  <view class="btn-area" id="buttonContainer">
      <!--原色-->
      <button type="primary">按钮原色</button>
      <button type="primary" loading="true">按钮Loading</button>
      <button type="primary" disabled="true">不可点Disabled</button>
      <!--默认-->
      <button type="default">默认值</button>
      <button type="default" disabled="true">默认值Disabled</button>
      <!--警告-->
      <button type="warn">警告类</button>
      <button type="warn" disabled="true">警告类操作 Disabled</button>

      <view class="button-sp-area">
        <button type="primary" plain="true">镂空按钮</button>
        <button type="primary" disabled="true" plain="true">不可点击</button>

        <button type="default" plain="true">按钮</button>
        <button type="default" disabled="true" plain="true">不可点按钮</button>

      <view class="mini-btn">
        <button  type="primary" size="mini">按钮</button>
        <button  type="default" size="mini">按钮</button>
        <button type="warn" size="mini">按钮</button>
      </view>
        <button type="primary" open-type="contact" session-from='BeiJing佩奇'>朋程</button>
      </view>
    </view>

附上资源☺☟☟

小程序官方示例代码
文中代码均对小程序官方示例代码做出过修改,包括添加注释,新加代码测试。
本文代码示例
小程序wiki

相关文章

网友评论

      本文标题:WeChat小程序表单篇~button

      本文链接:https://www.haomeiwen.com/subject/cyqzrftx.html