微信小程序项目实例——体质计算器

文章目录

微信小程序项目实例——体质计算器
一、项目展示
二、项目核心代码
文末

项目代码见文字底部，点赞关注有惊喜

一、项目展示

体质计算器是一款简单的健康类小程序
用户可以根据自身的身高和体重
选择所测标准（中国、亚洲、国际）
生成自身BMI值和当前身体状况
并给出标准体重和相关疾病的预测

二、项目核心代码

小程序仅一个简单的页面
从上至下分别是测试结果、数据收集和BMI对照表
用户可以选择三大标准【中国、亚洲、国际】
身体状况分为【偏瘦、正常、偏胖、肥胖、重度肥胖、极重度肥胖】


<!--index.wxml-->
<view class="container"><view class="result"><view class="title">BMI值</view><view class="score">{{score}}</view><view class="tip first-tip"><view class="physical-condition">身体状况：<text class="">{{physicalCondition}}</text></view><view class="weight-standard no-border">身高标准体重：<text class="">{{weightStandard}}kg</text></view></view><view class="tip"><view class="physical-condition">相关疾病发病危险性: <text class="">{{danger}}</text></view></view></view><view class="input-container"><view class="item"><text class="label">身高</text><text class="unit">cm</text><input type="digit" bindinput="bindKeyHightInput" maxlength="6" class="" /></view><view class="item"><text class="label">体重</text><text class="unit">kg</text><input type="digit" bindinput="bindKeyWeightInput" maxlength="6" class="" /></view><view class="item no-border"><text class="label">标准</text><picker mode="selector" value="{{index}}" range="{{array}}" bindchange="bindPickerChange" class="type_select"><view class="picker">{{array[index]}}<text>></text></view></picker></view><button class="calcu_btn" bindtap="calculateBtn">开始计算</button></view><view class="compatable"><text class="table-title">标准对照表</text><!--中国标准--><view class="table" hidden="{{index!= 0}}"><view class="row thead"><text class="col">BMI值</text><text class="col">身体状况</text></view><view class="row"><text class="col">{{charLt}}18.5</text><text class="col">偏瘦</text></view><view class="row"><text class="col">  18.5～23.9</text><text class="col">正常</text></view><view class="row"><text class="col">24～27.9</text><text class="col">偏胖</text></view><view class="row"><text class="col">≥28</text><text class="col">肥胖</text></view></view><!--国际标准--><view class="table" hidden="{{index!= 1}}"><view class="row thead"><text class="col">BMI值</text><text class="col">身体状况</text></view><view class="row"><text class="col">{{charLt}}18.5</text><text class="col">偏瘦</text></view><view class="row"><text class="col"> 18.5～24.9</text><text class="col">正常</text></view><view class="row"><text class="col">25～29.9</text><text class="col">偏胖</text></view><view class="row"><text class="col">30.0～34.9</text><text class="col">肥胖</text></view><view class="row"><text class="col">35.0～39.9</text><text class="col">重度肥胖</text></view><view class="row"><text class="col">≥40.0</text><text class="col">极重度肥胖</text></view></view><!--亚洲标准--><view class="table" hidden="{{index!= 2}}"><view class="row thead"><text class="col">BMI值</text><text class="col">身体状况</text></view><view class="row"><text class="col">{{charLt}}18.5</text><text class="col">偏瘦</text></view><view class="row"><text class="col">  18.5～22.9</text><text class="col">正常</text></view><view class="row"><text class="col">23～24.9</text><text class="col">偏胖</text></view><view class="row"><text class="col">25～29.9</text><text class="col">肥胖</text></view><view class="row"><text class="col">≥30</text><text class="col">重度肥胖</text></view></view></view>
</view>

/**index.wxss**/
.result{width:100%;background-color: #22afcc;
}.result .title{padding: 0 40rpx;font-size: 28rpx;padding-top:20rpx;color: #f1f1f1;font-weight:600;
}.result .score{padding: 0 40rpx;line-height: 100rpx;font-size: 60rpx;color: #fff;
}.tip{display: flex;}.first-tip{margin-bottom: 4rpx;}.tip view{line-height: 80rpx;color: #f1f1f1;font-size: 24rpx;background-color:#20a1bb;flex: 1;padding-left: 40rpx;}.tip view text{color: #fff;}.physical-condition{margin: 0 4rpx 0 0;}.input-container {padding: 0 40rpx;
}
.item {border-bottom: 1px solid #e2e2e2;height:56rpx;line-height: 56rpx;font-size:32rpx;padding: 20rpx 0rpx;color: #909090;
}.item .label{width: 20%;float: left;vertical-align: middle;
}.item input{margin-left: 30%;margin-right: 10%;height:40rpx;border: 1rpx solid #d9d9d9;border-radius: 6rpx;background-color: #f1f1f1;text-align: right;padding-right: 8rpx;color:#22afcc;
}.item .unit{float: right;
}.item .type_select{float: right;
}.item .type_select text{margin-left: 8rpx;
}.no-border{border-bottom: 0px;
}.calcu_btn {background-color: #22afcc;color: #fff;font-weight: 400;
}#result-container{padding: 20rpx 0;
}.compatable{padding: 40rpx 40rpx 0 40rpx;font-size: 28rpx;color:#909090;
}.compatable .table-title{line-height: 50rpx;height: 50rpx;
}.table{border: 1rpx solid #e2e2e2;
}.table .row{display: flex;border-bottom: 1rpx solid #e2e2e2;line-height: 60rpx;height: 60rpx;
}.table .row .col{flex: 1;text-align: center;border-right: 1rpx solid #e2e2e2;
}.table .thead{background-color: #22afcc;color:#f1f1f1;
}.table .row .col:last-child{border-right: 0rpx;
}.table .row:last-child{border-bottom: 0rpx;
}

文末

具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载小程序

微信小程序项目实例——体质计算器相关推荐

微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁文章目录微信小程序项目实例--手势解锁一.项目展示二.设置手势.手势解锁三.手势重置文末:项目代码项目代码见文字底部一.项目展示这是一款简单实用的手势解 ...
微信小程序项目实例——摇色子
微信小程序项目实例--摇色子文章目录微信小程序项目实例--摇色子一.项目展示二.核心代码三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示摇色子是一款简易的游戏类小程序用 ...
微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个文章目录微信小程序项目实例--食堂吃哪个一.项目展示二.操作流程和核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款娱乐性 ...
微信小程序项目实例——记账本
微信小程序项目实例--记账本文章目录微信小程序项目实例--记账本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款简易的记账本小程序用户可以记 ...
微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本文章目录微信小程序项目实例--心情记事本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示心情记事本是一款可以记录当前心 ...
微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘文章目录微信小程序项目实例--幸运大转盘一.项目展示二.抽奖页三.领奖页文末:项目代码项目代码见文字底部,点赞关注有惊喜一.项目展示幸运大转盘是一个简 ...
微信小程序项目实例——狼人杀
微信小程序项目实例--狼人杀文章目录微信小程序项目实例--狼人杀一.项目展示二.首页三.游戏页四.特殊角色文末项目代码见文字底部,点赞关注有惊喜一.项目展示狼人杀是一款多人参与的, ...
微信小程序项目实例——我有一支画笔（画画）
微信小程序项目实例--我有一支画笔(画画) 文章目录微信小程序项目实例--我有一支画笔(画画) 一.项目展示二.首页三.自由绘图四.照片绘图文末项目代码见文字底部,点赞关注有惊喜一.项目 ...

微信小程序项目实例——体质计算器

微信小程序项目实例——体质计算器

文章目录

一、项目展示

二、项目核心代码

文末

微信小程序项目实例——体质计算器相关推荐

最新文章

热门文章