index.wxml
<view class='page'>
<view class='body'>
<text>計(jì)算金額：</text>
<form bindsubmit='formSubmit' bindreset='formReset'>
<view class='input'>
<input name='input' placeholder='輸入金額' type='number' />
<text>\n</text>
</view>
<button form-type='submit' type='primary'>計(jì)算</button>
<text>\n</text>
<button form-type='reset'>重置</button>
</form>
</view>
<view class='body'>
<text>\n計(jì)算的結(jié)果為：{{count}}</text>
</view>
</view>
index.wxss
.page {
margin-top: 40rpx;
margin-left: 40rpx;
margin-right: 40rpx;
font-size: 47rpx;
}
.body {
font-size: 43rpx;
background-color: #fff;
}
.input {
font-size: 43rpx;
background-clip: #fff;
}
index.js
Page({
data:{
'count':''
},
formSubmit(e) {
var num = Number(e.detail.value.input); //將Object轉(zhuǎn)換為數(shù)值
this.setData({
'count':num
})
},
formReset() {
this.setData({
'count':''
})
}
})
計(jì)算器需要我們輸入一個(gè)數(shù)字，然后點(diǎn)擊計(jì)算按鈕進(jìn)行運(yùn)算珍逸。我偷懶就沒(méi)有寫(xiě)具體的計(jì)算方法，后面我會(huì)完善這個(gè)計(jì)算器的功能，比如實(shí)現(xiàn)十進(jìn)制轉(zhuǎn)換為二進(jìn)制的功能箕憾。這里只做出大致的模板而已伴栓。點(diǎn)擊并提交就需要表單組件<form></form>伦连。表單組件內(nèi)可以提交用戶(hù)輸入和選擇的switch,input,checkbox,slider,radio,picker等組件。
效果預(yù)覽如下：
圖片.png
