房贷计算器微信小程序原生语言

2024-03-07 20:10

本文主要是介绍房贷计算器微信小程序原生语言,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

微信小程序: 房贷计算器

效果:
在这里插入图片描述
输入 300万
在这里插入图片描述
结果
在这里插入图片描述
还款明细
在这里插入图片描述

一共有3个页面
1、输入页面
2、结果页面
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><!--商业贷款--><view class="cu-bar bg-white solid-bottom margin-top"><view class="action text-black">商业贷款</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">商业贷款年限</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">商业贷款利率</view><view class="action"><input type="digit" value="{{lv1}}" placeholder="请输入商业贷款利率

这篇关于房贷计算器微信小程序原生语言的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/784679

相关文章

C语言中%zu的用法解读

《C语言中%zu的用法解读》size_t是无符号整数类型,用于表示对象大小或内存操作结果,%zu是C99标准中专为size_t设计的printf占位符,避免因类型不匹配导致错误,使用%u或%d可能引发... 目录size_t 类型与 %zu 占位符%zu 的用途替代占位符的风险兼容性说明其他相关占位符验证示

C语言进阶(预处理命令详解)

《C语言进阶(预处理命令详解)》文章讲解了宏定义规范、头文件包含方式及条件编译应用,强调带参宏需加括号避免计算错误,头文件应声明函数原型以便主函数调用,条件编译通过宏定义控制代码编译,适用于测试与模块... 目录1.宏定义1.1不带参宏1.2带参宏2.头文件的包含2.1头文件中的内容2.2工程结构3.条件编

Go语言并发之通知退出机制的实现

《Go语言并发之通知退出机制的实现》本文主要介绍了Go语言并发之通知退出机制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1、通知退出机制1.1 进程/main函数退出1.2 通过channel退出1.3 通过cont

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发(goroutine)、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置(VS Code)一些基本

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

SpringBoot3.X 整合 MinIO 存储原生方案

《SpringBoot3.X整合MinIO存储原生方案》本文详细介绍了SpringBoot3.X整合MinIO的原生方案,从环境搭建到核心功能实现,涵盖了文件上传、下载、删除等常用操作,并补充了... 目录SpringBoot3.X整合MinIO存储原生方案:从环境搭建到实战开发一、前言:为什么选择MinI

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化