支付宝小程序扩展表单 按钮·Button

2020-09-18 11:22 更新

按钮,用户只需单击一下即可执行操作并做出选择。常用于表单提交、界面跳转、模块引导点击。具体用法和小程序框架中 button 保持一致,在 button 基础上做了样式的封装。

扫码体验

示例代码

{
 "defaultTitle": "Button",
 "usingComponents": {
   "button": "mini-ali-ui/es/button/index",
   "radio": "mini-ali-ui/es/am-radio/index",
   "checkbox": "mini-ali-ui/es/am-checkbox/index"
 }
}
<view class="container">
 <button onTap="onTest" showLoading="{{showLoading}}" dataName="{{dataName}}" type="{{type}}" subtitle="{{subtitle}}" disabled="{{disabled}}" shape="{{shape}}" capsuleSize="{{capsuleSize}}" capsuleMinWidth="{{capsuleMinWidth}}">
   {{title}}
 </button>
 <view>主标题</view>
 <input value="{{title}}" onInput="titleChange"/>
 <view>副标题</view>
 <input value="{{subtitle}}" onInput="subtitleChange"/>
 <view>按钮类型</view>
 <radio-group class="radio-group" onChange="typeChange" name="type">
   <label class="radio" a:for="{{types}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
   </label>
 </radio-group>
 <view>形状</view>
 <radio-group class="radio-group" onChange="shapeChange" name="shape">
   <label class="radio" a:for="{{shapes}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
   </label>
 </radio-group>
 <view>胶囊按钮大小</view>
 <radio-group class="radio-group" onChange="sizeChange" name="size">
   <label class="radio" a:for="{{capsuleSizes}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>
   </label>
 </radio-group>
 <view>是否禁用</view>
 <checkbox onChange='onDisableChange'/>
 <view>是否限制胶囊按钮最小宽度</view>
 <checkbox onChange='onMinWidthChange'/>
 <view>是否现实loading</view>
 <checkbox onChange='onLoadingChange'/>
</view>
.container {
  padding: 20rpx;
}


.container button {
  margin-bottom: 24rpx;
}

Page({
  data: {
    title: '按钮操作 Normal',
    subtitle: '',
    disabled: false,
    dataName: '1',
    type: '',
    shape: 'default',
    capsuleSize: 'medium',
    capsuleMinWidth: false,
    showLoading: false,
    types: [
      { name: 'default', value: 'default', checked: true },
      { name: 'primary', value: 'primary' },
      { name: 'ghost', value: 'ghost' },
      { name: 'text', value: 'text' },
      { name: 'warn', value: 'warn' },
      { name: 'warn-ghost', value: 'warn-ghost' },
      { name: 'light', value: 'light' },
    ],
    shapes: [
      { name: 'default', value: 'default', checked: true },
      { name: 'capsule', value: 'capsule' },
    ],
    capsuleSizes: [
      { name: 'small', value: 'small' },
      { name: 'medium', value: 'medium', checked: true },
      { name: 'large', value: 'large' },
    ],
  },
  onLoad() {
  },
  typeChange(e) {
    this.setData({
      type: e.detail.value,
    });
  },
  shapeChange(e) {
    this.setData({
      shape: e.detail.value,
    });
  },
  sizeChange(e) {
    this.setData({
      capsuleSize: e.detail.value,
    });
  },
  titleChange(e) {
    this.setData({
      title: e.detail.value,
    });
  },
  subtitleChange(e) {
    this.setData({
      subtitle: e.detail.value,
    });
  },
  onDisableChange(e) {
    this.setData({
      disabled: e.detail.value,
    });
  },
  onMinWidthChange(e) {
    this.setData({
      capsuleMinWidth: e.detail.value,
    });
  },
  onTap() {
    // e.target.dataset.name
  },
  onLoadingChange(e) {
    this.setData({
      showLoading: e.detail.value,
    });
  },
});

属性

属性 类型 默认值 可选值 描述 最低版本
type String default default, primary, ghost, warn, warn-ghost, text, light 按钮样式。 -
subtitle String - - 子标题 -
shape String default default, capsule 按钮形状。 -
capsuleSize String medium large, medium, small 胶囊按钮大小。 -
capsuleMinWidth Boolean false true, false 是否启用胶囊按钮最小宽度。 -
disabled Boolean false true, false 是否禁用。 -
showLoading Boolean false true, false 按钮文字前是否带 loading 图标。 -
hover-class String button-hover - 按钮按下去的样式类。button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},hover-class="none" 时表示没有点击态效果。 -
hover-start-time Number 20 - 按住后多少时间后出现点击状态,单位毫秒。 -
hover-stay-time Number 70 - 手指松开后点击状态保留时间,单位毫秒。 -
hover-stop-propagation Boolean false true, false 是否阻止当前元素的祖先元素出现点击态。 1.10.0
form-type String - - 有效值:submit, reset,用于 form 组件,点击分别会触发 submit/reset 事件。 -
open-type String - - 开放能力。 1.1.0
scope String - - 当 open-type 为 getAuthorize 时有效。 1.11.0
onTap EventHandle - - 点击。 -
app-parameter String - - 打开 APP 时,向 APP 传递的参数,open-type="launchApp" 时有效。 -
public-id String - - 生活号 ID, 必须是当前小程序同主体且已关联的生活号,open-type="lifestyle" 时有效。 -
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号