用CSS给健身的女朋友做一个喝水记录本

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

前言

事情是这样的，由于七八月份的晚上时不时就坐在地摊上开始了喝酒撸串的一系列放肆的长肉肉项目。 这不，前段时间女朋友痛下决心（心血来潮）地就去报了一个健身的私教班，按照教练给的饮食计划中，其中有一项是每天需要喝 2.6L 的水来促进体内的新陈代谢。 作为伴侣肯定要十分支持的呀，不过因为平时工作也是十分费脑筋的，不会专门去记录每天喝了多少水，特别容易忘记。所以做了这个喝水记录本给她。

开发需求

整体的开发需求和前言里描述的差不多，整体功能拆分一下就非常清晰了。

一、定义变量

1. 大杯子：我们需要一个总量目标，用于定义每天的计划值。
2. 小杯子：一个单次目标，我们不会一次接一大桶水来喝，即使用小杯子喝水时，每个杯子的刻度值。

二、逻辑整合

1. 点击每个小杯子时，从大杯子的总量中扣除小杯子的刻度并记录，对应UI水位升高。
2. 首次点击小杯子时，展示百分率刻度值，提升水位。
3. 当完成目标值后，隐藏剩余水量的文字。
4. "清空"按钮，消除本地记录值，恢复UI水位，展示剩余量。

创建流程和主要代码

 此模块代码是应用于小程序使用的，所以代码部分使用wx框架。（下面有普通代码部分）

wxml

构造整体布局，布局和制作大杯子和小杯子。

在上一段开发需求部分中提到的隐藏内容时，注意不要使用 wx:if 直接删除整个标签，这样会导致画面跳动，无法实现动画的平滑过渡。

用三元运算符隐藏文字可以实现较好的过渡

<view class="body">
  <text class="h1">喝水记录本</text>
  <text class="h3">今日目标: 2.6升 </text>

  <view class="cup">
    <view class="remained" style="height: {{remainedH}}px">
      <text class="span">{{isRemained ? liters : ''}}</text>
      <text class="small">{{isRemained ? '剩余' : ''}}</text>
    </view>

    <view class="percentage" style="{{percentageH}}">{{isPercentage ? percentage : ''}}</view>
  </view>

  <text class="text">请选择喝水的杯子</text>

  <view class="cups">
    <view class="cup cup-small" bindtap="cups" data-ml="700">700 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="400">400 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="600">600 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="500">500 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="50">50 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="100">100 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="150">150 ml</view>
    <view class="cup cup-small" bindtap="cups" data-ml="300">300 ml</view>
  </view>

  <view class="cancle" bindtap="update">清空</view>
</view>

wxss

css就是简单的画杯子和布局，值得说的就是往大杯子里加水的动画 transition 一下就可以了

.body {
  height: 108vh;
  background-color: #3494e4;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.h1 {
  margin: 10px 0 0;
}

.h3 {
  font-weight: 400;
  margin: 10px 0;
}

.cup {
  background-color: #fff;
  border: 4px solid #144fc6;
  color: #144fc6;
  border-radius: 0 0 40px 40px;
  height: 330px;
  width: 150px;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cup.cup-small {
  height: 95px;
  width: 50px;
  border-radius: 0 0 15px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 5px;
  transition: 0.3s ease;
}

.cup.cup-small.full {
  background-color: #6ab3f8;
  color: #fff;
}

.cups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 280px;
}

.remained {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  transition: 0.3s ease;
}

.remained .span {
  font-size: 20px;
  font-weight: bold;
}

.remained .small {
  font-size: 12px;
}

.percentage {
  background-color: #6ab3f8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  height: 0;
  transition: 0.3s ease;
  box-sizing: border-box;
}

.text {
  text-align: center;
  margin: 0 0 5px;
}

.cancle {
  cursor: pointer;
}

js

逻辑注释写在了代码中

Page({
  data: {
    liters: '2.6L',
    isPercentage: true,
    isRemained: true,
    percentage: '',
    percentageH: 'height: 0',
    RemainedH: 0,
    goal: 2600
  },

  // 每次进入页面后加载记录的值，执行动画
  onShow() {
    this.setData({ goal: Number(wx.getStorageSync('goal')) })
    this.updateBigCup(2600 - this.data.goal)
  },

  // 点击小杯子时的触发逻辑
  cups(data) {
    const ml = Number(data.currentTarget.dataset.ml);
    const goal = this.data.goal - ml;
    const total = 2600 - goal;
    this.setData({ goal })
    wx.setStorageSync("goal", goal);
    this.updateBigCup(total)
  },

  // 更新 UI 数据
  updateBigCup(total) {
    const { goal } = this.data;
    if (goal != 2600) {
      this.setData({
        isPercentage: true,
        percentage: `${(total / 2600 * 100).toFixed(0)}%`,
        percentageH: `height: ${total / 2600 * 330}px`
      })
    }

    if (goal <= 0) {
      this.setData({
        remainedH: 0,
        isRemained: false,
      })
    } else {
      this.setData({
        isRemained: true,
        liters: `${goal / 1000}L`
      })
    }
  },

  // 清空记录值
  update() {
    wx.removeStorage({ key: 'goal' })
    this.setData({
      goal: 2600,
      isPercentage: false,
      isRemained: true,
      remainedH: 0,
      percentageH: 'height: 0px',
      liters: '2.6L'
    })
  }
})

码上掘金

  上面的代码部分主要用于小程序使用，码上掘金可在网页中使用。

结语

  感谢大家能看到这里！！本篇的代码本身没有什么技术含量，可能是比较会偏向实用性的一篇，对！是有一些的对吧！可以自己改装成Chrome插件使用会更方便更实用。啥？你问我为什么不直接写Chrome插件？有没有一种可能不是我不想，而是😭。

  好啦，如果你身边有健身的朋友也可以给他做一个哦~再次谢谢大家