效果图
属性
参考:button
代码
- app.js
//app.js
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
- app.json
{
"pages": [
"pages/button/button",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#BBDEF8",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
- button.wxml
<view class="page">
<view class="page__hd">
<view class="page__title">Button</view>
<view class="page__desc">按钮,WeUI采用小程序原生的按钮为主体,加入一些间距的样式。</view>
</view>
<view class="page__bd page__bd_spacing">
<button class="weui-btn" type="primary">页面主操作</button>
<button class="weui-btn" type="primary" disabled="true">页面主操作</button>
<button class="weui-btn" type="default">页面次要操作</button>
<button class="weui-btn" type="default" disabled="true">页面次要操作</button>
<button class="weui-btn" type="warn">警告类操作</button>
<button class="weui-btn" type="warn" disabled="true">警告类操作</button>
<view class="button-sp-area">
<button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
<button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
<button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
</view>
</view>
</view>
- button.wxss
page{background-color:#EDEDED;}
.button-sp-area{
margin: 0 auto;
padding-top: 15px;
text-align:center;
}
.mini-btn{
margin: 0 4px;
}