webUrl: https://qft12m.smartapps.cn/component/button/button

title: button 按钮 header: develop nav: component sidebar: formlist_button

webUrl: https://qft12m.smartapps.cn/component/button/button

解释： 按钮

属性说明

size有效值

type有效值

form-type有效值

open-type有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1 ：主要按钮

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>主要按钮</view>
            <view>primary</view>
        </view>
        <button type="primary" plain="false">
            主按钮 normal
        </button>
        <button type="primary" loading>
            主按钮 loading
        </button>
        <button type="primary" disabled>
            主按钮 disabled
        </button>
    </view>
</view>

:::

代码示例 2 ： 次要按钮

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>次要按钮</view>
            <view>default</view>
        </view>
        <button type="default" plain="false">
            次按钮 normal
        </button>
        <button type="default" loading>
            次按钮 loading
        </button>
        <button type="default" disabled>
            次按钮 disabled
        </button>
    </view>
</view>

:::

代码示例 3： 警示按钮

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>警示按钮</view>
            <view>warn</view>
        </view>
        <button type="warn">
            警示按钮 normal
        </button>
        <button type="warn" loading>
            警示按钮 loading
        </button>
        <button type="warn" disabled>
            警示按钮 disabled
        </button>
    </view>
</view>

:::

代码示例 4： 小尺寸按钮

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>小尺寸按钮</view>
            <view>size='mini'</view>
        </view>
        <button type="primary" size="mini">
            按钮 
        </button>
        <button type="default" size="mini">
            按钮 
        </button>
        <button type="warn" size="mini">
            按钮 
        </button>
    </view>
</view>

:::

代码示例 5： 自定义点击态

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            自定义点击态
        </view>
        <button type="primary" hover-class="none" bind:tap="tap">
            无点击态
        </button>
        <button type="primary" hover-start-time="1000">
            点击态延迟出现
        </button>
        <button type="primary" hover-stay-time="2000">
            点击态延迟消失
        </button>
    </view>
</view>

Page({
    tap() {
        swan.showToast({
            title: '已点击',
            icon: 'none'
        });
    }
});

:::

代码示例 6：绑定开放能力

:::codeTab

<view class="wrap">
    <view class="card-area" s-if="{{!isWeb}}">
        <view class="top-description border-bottom">
            绑定开放能力
        </view>
       <view>
            <button type="primary" class="middle-btn" open-type="share">触发用户分享</button>
            <button type="primary" class="middle-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
            <button type="primary" class="middle-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
            <button type="primary" class="middle-btn" open-type="openSetting" bindopensetting="openSetting">打开授权设置页</button>
            <button type="primary" class="middle-btn" contact open-type="contact" bindopensetting="contact">打开客服对话</button>
            <button type="primary" class="middle-btn" open-type="chooseInvoiceTitle" bindchooseInvoiceTitle="chooseInvoiceTitle">选择用户发票抬头</button>
            <button type="primary" class="middle-btn" open-type="chooseAddress" bindchooseAddress="chooseAddress">选择用户收货地址</button>
       </view>
    </view>
</view>

Page({
    getUserInfo(e) {
        console.log('用户信息:', e);
    },
    openSetting(e) {
        console.log('用户设置:', e);
    },
    getPhoneNumber(e) {
        console.log('用户手机号:', e);
    },
    contact(e) {
        console.log('用户面板:', e);
    },
    chooseInvoiceTitle(e) {
        console.log('发票抬头:', e);
    },
    chooseAddress(e) {
        console.log('收货地址:', e);
    }
});

:::

代码示例 7： 不同类型按钮

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            form-type="submit/reset"
        </view>
        <form bindsubmit="submit" bindreset="reset">
            <button form-type="submit" type="primary">
                提交
            </button>
            <button form-type="reset">
                重置
            </button>
        </form>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            form-type="buttonclick"
        </view>
        <form>
            <button form-type="buttonclick" bindtap="buttonclick" type="primary" size="default">
                普通点击
            </button>
        </form>
    </view>
</view>

:::

代码示例 8：hover-stop-propagation属性

在开发者工具中预览效果

:::codeTab

<view class="wrap">
    <view class="card-area" hover-class="hover">
        <button type="primary" hover-stop-propagation='true'>
            按钮
        </button>
    </view>
</view>

.hover {
    opacity: .2;
}
.card-area {
    background-color: #5B9FFF;
}

:::