WeUI for 小程序button按钮

2018年09月03日 09:14 | 1256次浏览 作者原创 版权保护

我们上一章节讲解了如何引入小程序weui样式库文件weui.css,并验证了引入的有效性,今天给大家介绍如何利用微信小程序weui样式库,做出button按钮的效果。

一、打开小程序IDE工具,在pages下新建文件夹button

二、在button文件下新建文件button.wxml,button.wxss

三、在项目根目录下的app.json中配置新建的文件button,如下图

四、在根目录下的app.wxss添加全局样式代码

page{
background-color: #F8F8F8;
font-size: 16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page__hd {
padding: 40px;
}
.page__bd {
padding-bottom: 40px;
}
.page__bd_spacing {
padding-left: 15px;
padding-right: 15px;
}

.page__ft{
padding-bottom: 10px;
text-align: center;
}

.page__title {
text-align: left;
font-size: 20px;
font-weight: 400;
}

.page__desc {
margin-top: 5px;
color: #888888;
text-align: left;
font-size: 14px;
}

五、打开button.wxml文件,添加button按钮代码

<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">页面主操作 Normal</button>
<button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>

<button class="weui-btn" type="default">页面次要操作 Normal</button>
<button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>

<button class="weui-btn" type="warn">警告类操作 Normal</button>
<button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>

<view class="button-sp-area">
<button class="weui-btn" type="primary" plain="true">按钮</button>
<button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>

<button class="weui-btn" type="default" plain="true">按钮</button>
<button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>

<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><!--V型知识库原创 www.vxzsk.com-->

六、打开button.wxss文件,添加如下代码

.button-sp-area{
margin: 0 auto;
padding-top: 15px;
width: 60%;
}
.mini-btn{
margin-right: 5px;
}

七、点击IDE工具上面编译按钮,编译成功后,页面效果如下


此文章本站原创,地址 https://www.vxzsk.com/1880.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程