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

2024-03-01 13:20

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

微信小程序: 房贷计算器

效果:
在这里插入图片描述
输入 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/762586

相关文章

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求:新用户入职 创建一系列账号比较麻烦,打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英

Go语言使用Buffer实现高性能处理字节和字符

《Go语言使用Buffer实现高性能处理字节和字符》在Go中,bytes.Buffer是一个非常高效的类型,用于处理字节数据的读写操作,本文将详细介绍一下如何使用Buffer实现高性能处理字节和... 目录1. bytes.Buffer 的基本用法1.1. 创建和初始化 Buffer1.2. 使用 Writ

深入理解C语言的void*

《深入理解C语言的void*》本文主要介绍了C语言的void*,包括它的任意性、编译器对void*的类型检查以及需要显式类型转换的规则,具有一定的参考价值,感兴趣的可以了解一下... 目录一、void* 的类型任意性二、编译器对 void* 的类型检查三、需要显式类型转换占用的字节四、总结一、void* 的

用Java打造简易计算器的实现步骤

《用Java打造简易计算器的实现步骤》:本文主要介绍如何设计和实现一个简单的Java命令行计算器程序,该程序能够执行基本的数学运算(加、减、乘、除),文中通过代码介绍的非常详细,需要的朋友可以参考... 目录目标:一、项目概述与功能规划二、代码实现步骤三、测试与优化四、总结与收获总结目标:简单计算器,设计

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

C语言线程池的常见实现方式详解

《C语言线程池的常见实现方式详解》本文介绍了如何使用C语言实现一个基本的线程池,线程池的实现包括工作线程、任务队列、任务调度、线程池的初始化、任务添加、销毁等步骤,感兴趣的朋友跟随小编一起看看吧... 目录1. 线程池的基本结构2. 线程池的实现步骤3. 线程池的核心数据结构4. 线程池的详细实现4.1 初

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl