button组件学习笔记

下面是WXML代码：

1. <!--index.wxml-->
2. <view class="content">
3. <text class="con-text">怎么飞？点击【按钮】即飞</text>
4. <button class="con-button">Fly</button>
5. </view>

下面是JS代码：

1. Page({
2. data:{
3. },
4. onLoad:function(options){
5. // 页面初始化 options为页面跳转所带来的参数
6. },
7. onReady:function(){
8. // 页面渲染完成
9. },
10. onShow:function(){
11. // 页面显示
12. },
13. onHide:function(){
14. // 页面隐藏
15. },
16. onUnload:function(){
17. // 页面关闭
18. }
19. })

下面是WXSS代码：

1. .content{
2. padding-top: 20px;
3. }
4. .con-text{
5. display: block;
6. padding-bottom: 10px;
7. }
8. .con-button{
9. margin-top: 10px;
10. color: black;
11. background-color: lightgreen
12. }

下面是WXML代码：

1. <!--index.wxml-->
2. <view class="content">
3. <view class="con-top">
4. <text class="text-decoration">#按钮尺寸#</text>
5. <text class="con-text">mini:</text>
6. <button class="con-button" size="mini">Fly</button>
7. <text class="con-text">default:</text>
8. <button class="con-button" size="default">Fly</button>
9. </view>
10. <view class="con-bottom">
11. <text class="text-decoration">#按钮类型#</text>
12. <text class="con-text">primary:</text>
13. <button class="con-button" type="primary">Fly</button>
14. <text class="con-text">default:</text>
15. <button class="con-button" type="default">Fly</button>
16. <text class="con-text">warn:</text>
17. <button class="con-button" type="warn">Fly</button>
18. </view>
19. </view