微信小程序BMI计算器代码
时间: 2024-05-06 22:13:15 浏览: 154
微信小程序项目实例——体质计算器
5星 · 资源好评率100%
当然可以!下面是一个简单的微信小程序BMI计算器的代码示例:
wxml文件(index.wxml):
```html
<view class="">
<view class="title">BMI计算器</view>
<view class="input-container">
<text>身高(cm):</text>
<input bindinput="onHeightChange" type="number" placeholder="请输入身高" />
</view>
<view class="input-container">
<text>体重(kg):</text>
<input bindinput="onWeightChange" type="number" placeholder="请输入体重" />
</view>
<view class="result">您的BMI指数为:{{bmi}}</view>
</view>
```
wxss文件(index.wxss):
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100rpx;
}
.title {
font-size: 32rpx;
margin-bottom: 30rpx;
}
.input-container {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.result {
font-size: 28rpx;
margin-top: 30rpx;
}
```
js文件(index.js):
```javascript
Page({
data: {
height: '',
weight: '',
bmi: ''
},
onHeightChange(event) {
this.setData({
height: event.detail.value
});
this.calculateBMI();
},
onWeightChange(event) {
this.setData({
weight: event.detail.value
});
this.calculateBMI();
},
calculateBMI() {
const height = parseFloat(this.data.height);
const weight = parseFloat(this.data.weight);
if (height && weight) {
const bmi = (weight / ((height / 100) ** 2)).toFixed(2);
this.setData({
bmi: bmi
});
} else {
this.setData({
bmi: ''
});
}
}
})
```
这个示例中,我们使用了一个输入框来获取用户输入的身高和体重,然后根据用户输入的数值计算BMI指数,并将结果显示在页面上。
阅读全文