微信小程序： 房貸計算器

效果：

輸入 300萬

結(jié)果

還款明細(xì)

一共有3個頁面
1、輸入頁面
2、結(jié)果頁面
3、詳情頁面

1 index頁面

index.wxml文件

<view class="text-black"><!--房屋總價--><view class="cu-bar bg-white solid-bottom"><view class="action text-black">房屋總價</view><view class="action"><input type="digit" value="{{zj}}" placeholder="請輸入房屋總價" bindinput="iChange1" style="text-align: right;"></input><view class="text-gray margin-left-xs">萬元</view></view></view><!--首付比例--><view class="cu-bar bg-white solid-bottom"><view class="action text-black">首付比例</view><view class="action"><input type="digit" value="{{sf}}" placeholder="請輸入首付比例" bindinput="iChange2" style="text-align: right;"></input><view class="text-gray margin-left-xs">%</view></view></view><!--首付金額--><view class="cu-bar bg-white solid-bottom"><view class="action text-black">首付金額</view><view class="action"><input type="digit" value="{{sfm}}" placeholder="請輸入首付金額" bindinput="iChange3" style="text-align: right;"></input><view class="text-gray margin-left-xs">萬元</view></view></view><!--商業(yè)貸款--><view class="cu-bar bg-white solid-bottom margin-top"><view class="action text-black">商業(yè)貸款</view><view class="action"><view>{{dk1}}</view><view class="text-gray margin-left-xs">萬元</view></view></view><!--年限--><view class="cu-bar bg-white solid-bottom"><view class="action text-black">商業(yè)貸款年限</view><view class="action"><slider block-size="20" max="30" value="30" style="width: 370rpx;" bindchange="Schange1" /><view>{{y1}}</view><view class="text-gray margin-left-xs">年</view></view></view><!--利率--><view class="cu-bar bg-white solid-bottom"><view class="action text-black">商業(yè)貸款利率</view><view class="action"><input type="digit" value="{{lv1}}" placeholder="請輸入商業(yè)貸款利率