button 按钮

解释： 按钮

属性说明

size有效值

type有效值

form-type有效值

open-type有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例 1 ：不同大小按钮

在开发者工具中预览效果

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

代码示例 2 ： 不同颜色按钮

在开发者工具中预览效果

<view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            type='primary'        </view>        <button type="primary">            非禁用态        </button>        <button type="primary" disabled>            禁用态        </button>    </view>    <view class="card-area">        <view class="top-description border-bottom">            type='default'        </view>        <button type="default">            非禁用态        </button>        <button type="default"  disabled>            禁用态        </button>    </view>    <view class="card-area">        <view class="top-description border-bottom">            type='warn'        </view>        <button type="warn">            非禁用态        </button>        <button type="warn"  disabled>            禁用态        </button>    </view></view>

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

在开发者工具中预览效果

<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" size='mini'>                提交            </button>            <button form-type="reset" size='mini'>                重置            </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>

代码示例 4：不同功能按钮

在开发者工具中预览效果

<view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            open-type='share'        </view>        <button open-type='share' type="primary">            share        </button>    </view>    <view class="card-area">         <view class="top-description border-bottom">            open-type='getUserInfo'        </view>        <button open-type='getUserInfo' type="primary" bindgetuserinfo="getUserInfo">            getUserInfo        </button>    </view>    <view class="card-area">         <view class="top-description border-bottom">            open-type='getPhoneNumber'        </view>        <button open-type='getPhoneNumber' type="primary" bindgetphonenumber="getphonenumber">            getPhoneNumber        </button>    </view>    <view class="card-area">         <view class="top-description border-bottom">            open-type='openSetting'        </view>        <button open-type='openSetting' type="primary" bindopensetting="openSetting">            openSetting        </button>    </view>    <view class="card-area">         <view class="top-description border-bottom">            open-type='contact'        </view>        <button open-type='contact' type="primary" bindcontact="contact">            contact        </button>    </view>    <view class="card-area">         <view class="top-description border-bottom">            open-type='chooseInvoiceTitle'        </view>        <button open-type='chooseInvoiceTitle' type="primary" bindchooseInvoiceTitle="chooseInvoiceTitle">            chooseInvoiceTitle        </button>    </view>    <view class="card-area">         <view class="top-description border-bottom">            open-type='chooseAddress'        </view>        <button open-type='chooseAddress' type="primary" bindchooseAddress="chooseAddress">            chooseAddress        </button>    </view></view>

Page({
    getphonenumber(e) {
        console.log(e)
    },
    getUserInfo(e){
        console.log(e)
    },
    opensetting(e) {
        console.log(e)
    },
    contact(e) {
        console.log(e)
    },
    chooseInvoiceTitle(e) {
        console.log(e)
    },
    chooseAddress(e) {
        console.log(e)
    }        }
});

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

在开发者工具中预览效果

<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;
}