--- theme: devui-blue --- 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t") ## 前言事情是这样的，由于七八月份的晚上时不时就坐在地摊上开始了喝酒撸串的一系列放肆的长肉肉项目。这不，前段时间女朋友痛下决心（心血来潮）地就去报了一个健身的私教班，按照教练给的饮食计划中，其中有一项是每天需要喝 2.6L 的水来促进体内的新陈代谢。作为伴侣肯定要十分支持的呀，不过因为平时工作也是十分费脑筋的，不会专门去记录每天喝了多少水，特别容易忘记。所以做了这个喝水记录本给她。 ## 开发需求整体的开发需求和前言里描述的差不多，整体功能拆分一下就非常清晰了。 ### 一、定义变量 1. `大杯子`：我们需要一个**总量**目标，用于定义每天的计划值。 2. `小杯子`：一个单次目标，我们不会一次接一大桶水来喝，即使用小杯子喝水时，**每个杯子**的刻度值。 ### 二、逻辑整合 1. 点击每个小杯子时，从大杯子的总量中扣除小杯子的刻度并记录，对应UI水位升高。 2. 首次点击小杯子时，**展示**百分率刻度值，提升水位。 3. 当完成目标值后，**隐藏**剩余水量的文字。 4. "清空"按钮，**消除本地记录值**，恢复UI水位，展示剩余量。 ## 创建流程和主要代码此模块代码是应用于小程序使用的，所以代码部分使用wx框架。（下面有普通代码部分） ### wxml 构造整体布局，布局和制作大杯子和小杯子。在上一段`开发需求`部分中提到的隐藏内容时，注意不要使用 `wx:if` 直接删除整个标签，这样会导致画面跳动，无法实现动画的平滑过渡。 **用三元运算符隐藏文字可以实现较好的过渡** ```html 喝水记录本今日目标: 2.6升 {{isRemained ? liters : ''}} {{isRemained ? '剩余' : ''}} {{isPercentage ? percentage : ''}} 请选择喝水的杯子 700 ml 400 ml 600 ml 500 ml 50 ml 100 ml 150 ml 300 ml 清空 ``` ### wxss css就是简单的画杯子和布局，值得说的就是往大杯子里加水的动画 `transition` 一下就可以了 ```css .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 逻辑注释写在了代码中 ```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' }) } }) ``` ## 码上掘金上面的代码部分主要用于小程序使用，码上掘金可在网页中使用。 [代码片段](https://code.juejin.cn/pen/7144898649163005987) ## 结语感谢大家能看到这里！！本篇的代码本身没有什么技术含量，可能是比较会偏向实用性的一篇，对！是有一些的对吧！可以自己改装成Chrome插件使用会更方便更实用。啥？你问我为什么不直接写Chrome插件？有没有一种可能不是我不想，而是😭。好啦，如果你身边有健身的朋友也可以给他做一个哦~再次谢谢大家