计算机器界面UI 1

掌握了view、input、button组件的使用方法，就可以开始编写计算器界面了。
1.结构准备
在pages下新建一个calc目录，用来保存计算器页面的4个文件。
将app.json中calc加入pages数组中。

{ 
 "pages":[ 
    "pages/calc/calc",  
    "pages/button/button",  
    "pages/index/index",  
    "pages/logs/logs"
            ], 
 "window":{ 
   "backgroundTextStyle":"light", 
   "navigationBarBackgroundColor": "#fff", 
   "navigationBarTitleText": "计算器",  
   "navigationBarTextStyle":"black" 
             }
             }

calc.json:

{
  "navigationBarBackgroundColor":"#00ff00", 
   "navigationBarTitleText":"计算器",  
   "navigationBarTextStyle":"white"

}

calc.wxml:

< view class="container">

< input placeholder="被加数" bindinput="bindInput1"/>
< input placeholder="加数" bindinput="bindInput2"/>
< button type="primary" bindtap="bindAdd">计算< /button>
< input placeholder="结果" value="{{result}}" disabled/>

< /view>

calc.wxss:

.container{
  justify-content: flex-start;  
  padding: 30rpx 0;
}


.container input{ 
 background-color: #eee; 
  border-radius: 3px; 
   text-align: left;  
   width: 720rpx;  
   height: 100rpx;  
   line-height: 100rpx;  
   margin: 20rpx;
}


.container button{  
width: 80%;
}

在这里插入图片描述

calc.js:

Page({
  /**   * 页面的初始数据   */ 
   data: {   
    num1:"",   
    num2:"",  
    result:" "    
         },  
         
    bindAdd:function(e){   
    var r=this.data.num1*1+this.data.num2*1;   
     this.setData({    
     result:r     
             }); 
               },  
               
  bindInput1:function(e){    
  var n=e.detail.value;  
   if(!isNaN(n)){    
   this.setData({     
    num1:n    
           });   
            } 
             },

  bindInput2:function(e){   
  var n=e.detail.value;   
  if(!isNaN(n)){     
  this.setData({     
  num2:n    
          });  
            }
             } 
              })

在这里插入图片描述

num1,num2保存的是字符串，因此使用乘1操作是将其转化为数值。虽然input的value属性，也可以进行动态绑定，但它不是双向的。在js程序中需对用户进行输入的进行判断，如果为数值类型，则保存num1和num2中。

猜你喜欢