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

69 阅读3分钟
<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>
<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>

/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;

}

如何做好面试突击,规划学习方向?

面试题集可以帮助你查漏补缺,有方向有针对性的学习,为之后进大厂做准备。但是如果你仅仅是看一遍,而不去学习和深究。那么这份面试题对你的帮助会很有限。最终还是要靠资深技术水平说话。

网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。建议先制定学习计划,根据学习计划把知识点关联起来,形成一个系统化的知识体系。

学习方向很容易规划,但是如果只通过碎片化的学习,对自己的提升是很慢的。

同时我还搜集整理2020年字节跳动,以及腾讯,阿里,华为,小米等公司的面试题,把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 Xmind(实际上比预期多花了不少精力),包含知识脉络 + 分支细节

image

在搭建这些技术框架的时候,还整理了系统的高级进阶教程,会比自己碎片化学习效果强太多。

image

点击:《Android架构视频+BAT面试专题PDF+学习笔记》即可免费获取~

网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。