微信小程序--实现番茄钟功能

weiba_tao

已于 2022-12-15 15:34:10 修改

阅读量4.1k

点赞数 13

文章标签：微信小程序学习

于 2022-12-14 18:34:40 首次发布

本文链接：https://blog.csdn.net/weiba_tao/article/details/128319622

版权

番茄钟：

经常使用番茄钟的各种app，自己也想尝试一下制作，该小程序主要实现了番茄时钟、效率统计等功能。

设计如下：

代码地址：https://gitcode.net/weiba_tao/mypractice

计时页面：

代码如下：

页面分为选择时间及任务页，倒计时页，两个页面用hidden进行切换

---wxml 选择页---

<view hidden="{
  {isClock}}" class="wrap">
    <view class="slider">
        <slider min="1" max="60" show-value activeColor="#FA8072" value="{
  {time}}" bindchange="slideChange"></slider>
    </view>
    <view class="text">
        <view class="text_title">请选择一个任务</view>
        <view class="text_desc">在接下来的{
  {time}}分钟，开始专注吧</view>
    </view>
    <view class="box_cate">
        <view wx:for="{
  {cateArr}}" class="cate_item" wx:key="cate">
            <view class="cate_img">
                <image src="../../images/{
  {item.icon}}.png" bindtap="buttonChange" data-icon-list="{
  {item.text}}"></image>
            </view>
            <view class="cate_text">{
  {item.text}}</view>
        </view>
    </view>
</view>

---wxml 倒计时页---

<view hidden="{
  {!isClock}}" class="clock">
    <view class="clock_text">{
  {clockText}}中...</view>
    <view class="count_down">
        <canvas type="2d" id="circle" class="circle" ></canvas>
        <canvas type="2d" id="circle_active" class="circle_active"></canvas>
        <view class="count_text">{
  {timeStr}}</view>