微信小程序盒模型与页面布局
案例:摄氏温度转换成华氏温度
案例描述:计算公式为F=(9/5)*C+32
本案例主要涉及JavaScript中顺序结构程序设计方法(按照解决问题顺序写成相应的语句,自上而下依次执行)、数学运算基本方法、input组件使用的方法、数据和事件绑定的实现方法。
知识要点
value:输入框中的内容 type:input的类型
password:是否是密码型
placeholder:输入框内容为空时占位符
placeholder-style:指定placeholder的样式
maxlength:最大输入长度,当为-1时不限制最大长度
indinput 键盘输入是触发
bindfocus输入框聚焦时触发
bindblur输入框失去焦点时触发
text:文本输入键盘
number:数字输入键盘
idcard:身份证输入键盘
digit:带小数点的数字键盘
程序代码
// pages/detail/detail.js
Page({
calc: function (e) { //事件处理函数
var C, F; //定义变量
C = e.detail.value; //获取input组件中输入的数值( value )
this.setData({
F: C * 9 / 5 + 32 //求出华氏温度F并渲染到视图层
})
}
})
<!--pages/detail/detail.wxml-->
<view class='box'>
<view class='title'>摄氏温度转华氏温度</view>
<view>
<input placeholder= '请输入摄氏温度' type='digit' bindblur='calc'></input>
</view>
<view>华氏温度为: {{F}} </view>
</view>
input{
margin: 20px 0; /*设置input组件 上下边距为20px ,左右边距为0*/
border-bottom: 1px solid blue; /*设置input组件 下边框粗细为1px、实心、蓝色*/
}
.box{
border: 5px dotted silver;
margin: 10rpx;
padding: 20rpx;
}
效果图
上面就是效果实现图请扫码关注