微信小程序 加法计算器

1、新建目录calc

2、pages加上

"pages/calc/calc",

3、 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>

4、calc.wxss

/* pages/calc/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%

}

5、calc.json

{

"navigationBarBackgroundColor":"#00ff00",

"navigationBarTitleText":"加法计算器",

"navigationBarTextStyle"档毁:"white",

"usingComponents": {}

}

6、calc.js

// pages/calc/calc.js

Page({

/**

问题：在微信小程序中使用height:calc(xx - xx)设置元素高度无效

排查原因:calc属性设置height或width时，要求父容器有明型衫确的对应属性设置，当父轮滚容器没有设置时，calc计算无法完成。因为我想设置高度的元素没有父容器，所以calc失效。

解决办法：1.给该元素添加设置明确高腊租余度的父容器。2.直接通过page{height:100%}解决。

---