本文给大家带来的是微信小程序房产估值结果显示页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="container">
<view class="index_banner">
<image class="forimg" src="http://image-10062465.image.myqcloud.com/i/17/04/06/e01fd38c0e3d1f3d6a2846ecb5633a24.jpg"></image>
<view class="forecast">
<text class="count">{{count}}</text>
<text class="foreInfo">房产总估值(万元)</text>
</view>
<text class="pginfo">(估值仅供参考,以实际评估金额为准)</text>
</view>
<view class="main">
<view class="bottom"></view>
<view class="title">你在我行最高可贷金额</view>
<view class="loan">
<text class="num">{{loanNum}}</text>
<text class="unit">万元</text>
<text class="info">(实际金额以合同文本为准)</text>
</view>
<view class="btnlist">
<navigator url="/pages/counter/index" open-type="switchTab">
<button class="btn" type="warn" plain="{{true}}">贷款计算器</button>
</navigator>
<navigator url="/pages/loan/index" open-type="switchTab">
<button class="btn" type="warn" plain="{{true}}">我要贷款</button>
</navigator>
<navigator class="again" url="/pages/index/index" open-type="switchTab">
再次估值
</navigator>
</view>
</view>
</view>
|
二、wxss样式文件代码如下：
.index_banner{background-color: #00C2C2;height: 400rpx;color: #fff;padding: 44rpx 107rpx;box-sizing: border-box}
.forimg{width: 165rpx;height: 165rpx;padding-right: 50rpx;border-right: 5rpx solid #fff;margin-right: 50rpx}
.forecast{display: inline-block;}
.forecast .count{font-size: 4.2em;display: block;line-height: 1.2em}
.forecast .foreInfo{text-align: center;display: block;}
.pginfo{font-size: .9em;display: block;text-align: center;color: #eee}
.main{width: 80%;overflow:hidden;border-radius: 1em;
text-align: center;box-shadow:0 0 40rpx rgba(0,0,0,0.3);padding: 1em;box-sizing: border-box;background-color: #fff;
position: absolute;
top: 300rpx;left: 10%;
}
.loan{padding-bottom: 1em;border-bottom: 3rpx dashed #999}
.loan .num{font-size: 4.3em;line-height: 1.3em;color: #333}
.main .title,.loan text{display: block;color: #666}
.btnlist{padding:1em;}
.btn{border:2rpx solid #00C2C2 !important;
color:#666 !important;
font-size:16px !important;
margin-bottom: 1em}
.main .bottom{
position: absolute;bottom: 0;left: 0;height: 2em;width: 100%;background-color:#00C2C2}
.again{display: inline-block;border-bottom: 1px dashed #999;margin-bottom: 1em;font-size: 16px}
|
三、js页面代码如下：
//获取应用实例
// import request from "../../utils/request";
import config from "../../etc/config";
import wxapp from "../../vendor/wxapp-client-sdk/index";
var app = getApp();
Page({
data: {
bannerList:app.globalData.bannerList,
count:null,
loanNum:null
},
onLoad:function(opt){
let loanlv=0.80;
let loanNum=parseInt(loanlv*opt.count*100)/100;
this.setData({
count: opt.count,
loanNum:loanNum
})
}
});
|
.jpg)
.jpg)
