微信小程序实际案例--加法计算器

分析：要实现该UI，至少需要使用到两个可输入数据的组件，一个按钮组件，一个结果显示组件。
还需将这些组件放到一个容器控件中。
view 组件：作为容器
input组件：用来接收输入数据和结果显示
button组件：接受用户单击，进行计算，得到结果。

            在pages下 建立个jiafa目录，其中wxml中使用view组件实例
                    


< view class="page">
< view class="page_hd">
< text class="page_title">view< /text>
< /view>

< view class="page_bd">
< view class="section">
< view class="section_title">flex-direction:row< /view>
< view class="flex-wrp" style="flex-direction:row;">

< view class="flex-item bc_green">1< /view> 
< view class="flex-item bc_red">2< /view>
< view class="flex-item bc_blue">3< /view>
< /view>
< /view>

< view class="section">
< view class="section_title">flex-direction:column< /view>
< view class="flex-wrp" style="height:300px;flex-direction:column;">

< view class="flex-item bc_green">1< /view>
< view class="flex-item bc_red">2< /view>
< view class="flex-item bc_blue">3< /view>

< /view>
< /view> 
< /view>
< /view>

由于代码中无数据绑定，无事件绑定，js文件和wxss文件可以不要，
运行效果如下：
在这里插入图片描述

以上每个view组件都有class属性，
通过这个属性可引用wxss中定义的样式控制页面中组件的显示样式同时，
有的view组件还可以通过style属性设置了内联样式。

具体文件样式写入wxss文件：

page{ 
 background-color: #fbf9fe; 
  height: 100%;
}

.page_hd{ 
 padding: 50rpx 50rpx 100rpx  50rpx; 
  text-align: center;
  }
  
  .page_title{
    display: inline-block;
    padding: 20rpx 40rpx; 
    font-size: 32rpx;  
    color: #AAAAAA; 
    border-bottom: 1px solid #CCCCCC;
        }
        
        .section  {  
        margin-bottom: 80rpx;
        }
        .section_title{ 
         margin-bottom: 16rpx; 
         padding-left: 30rpx; 
         padding-right: 30rpx;
}

.flex-wrp{ 
 height: 100px; 
 display: flex; 
 background-color: #FFFFFF;
}

.flex-item{ 
 width: 100px; 
 height: 100px; 
 color: #FFFFFF; 
 display: flex; 
 justify-content: center; 
 align-items: center;
      }
      
      .bc_green{ 
       background-color: #09BB07;
       }
       
       .bc_red{  
       background-color: #F76260;
       }
       
       .bc_blue{ 
        background-color: #10AEFF;
        }

在这里插入图片描述
显示内容如：flex-direction:row、颜色方块、颜色方块中的数字等。

微信小程序实际案例--加法计算器

猜你喜欢