微信小程序盒模型与页面布局

案例：摄氏温度转换成华氏温度

案例描述:计算公式为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.jsPage({ calc: function (e) { //事件处理函数 var C, F; //定义变量 C = e.detail.value; //获取input组件中输入的数值( value ) this.setData({ F: C * 9 / 5 + 32 //求出华氏温度F并渲染到视图层 }) }})

input{margin: 20px 0; /*设置input组件 上下边距为20px ,左右边距为0*/border-bottom: 1px solid blue; /*设置input组件 下边框粗细为1px、实心、蓝色*/}.box{ border: 5px dotted silver; margin: 10rpx; padding: 20rpx;}

效果图