1. 项目规划

  • 功能需求
    • 添加待办事项
    • 标记完成/未完成
    • 删除待办事项
    • 分类或标签管理(可选)
    • 数据持久化(本地存储)

2. 实现功能

  • 添加待办事项
    • 监听输入框和按钮事件,将输入内容添加到列表。 
  • 标记完成/未完成
    • 使用复选框或滑动操作,更新事项状态。
  • 删除待办事项
    • 支持左滑删除或长按删除。
  • 数据持久化
    • 使用本地存储待办事项数据。

3. 代码实现

基于微信小程序开发一个待办事项应用,主要包括以下功能:

  1. 创建待办事项
  2. 标记完成状态
  3. 删除待办事项
  4. 本地存储待办事项数据

首先,我会创建以下文件:

  1. app.json - 小程序全局配置
  2. pages/index/index.js - 页面逻辑
  3. pages/index/index.wxml - 页面结构
  4. pages/index/index.wxss - 页面样式
  5. pages/index/index.json - 页面配置

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "待办事项","navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

<view class="container"><view class="header"><inputplaceholder="添加待办事项"value="{{inputValue}}"bindinput="inputChange"bindconfirm="addTodo"/><button bindtap="addTodo">添加</button></view><view class="todo-list"><viewwx:for="{{todos}}"wx:key="id"class="todo-item {{item.done ? 'done' : ''}}"bindtap="toggleTodo"data-id="{{item.id}}"><text>{{item.text}}</text><button bindtap="deleteTodo" data-id="{{item.id}}">删除</button></view></view>
</view>

.container {padding: 20px;
}
.header {display: flex;margin-bottom: 20px;
}
.header input {flex: 1;margin-right: 10px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;
}
.todo-list {margin-top: 20px;
}
.todo-item {display: flex;justify-content: space-between;align-items: center;padding: 10px;margin-bottom: 10px;border: 1px solid #eee;border-radius: 4px;
}
.todo-item.done {text-decoration: line-through;color: #999;
}

Page({data: {todos: [],inputValue: ''},onLoad() {this.loadTodos();},loadTodos() {const todos = wx.getStorageSync('todos') || [];this.setData({ todos });},saveTodos() {wx.setStorageSync('todos', this.data.todos);},addTodo() {if (!this.data.inputValue.trim()) return;const newTodo = {id: Date.now(),text: this.data.inputValue,done: false};this.setData({todos: [...this.data.todos, newTodo],inputValue: ''}, this.saveTodos);},toggleTodo(e) {const { id } = e.currentTarget.dataset;const todos = this.data.todos.map(todo =>todo.id === id ? { ...todo, done: !todo.done } : todo);this.setData({ todos }, this.saveTodos);},deleteTodo(e) {const { id } = e.currentTarget.dataset;const todos = this.data.todos.filter(todo => todo.id !== id);this.setData({ todos }, this.saveTodos);},inputChange(e) {this.setData({ inputValue: e.detail.value });}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/93239.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/93239.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/93239.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C#】Region、Exclude的用法

在 C# 中&#xff0c;Region 和 Exclude 是与图形编程相关的概念&#xff0c;通常在使用 System.Drawing 命名空间进行 GDI 绘图时出现。它们主要用于定义和操作二维空间中的区域&#xff08;几何区域&#xff09;&#xff0c;常用于窗体裁剪、控件重绘、图形绘制优化等场景。 …

机器学习 - Kaggle项目实践(3)Digit Recognizer 手写数字识别

Digit Recognizer | Kaggle 题面 Digit Recognizer-CNN | Kaggle 下面代码的kaggle版本 使用CNN进行手写数字识别 学习到了网络搭建手法学习率退火数据增广 提高训练效果。 使用混淆矩阵 以及对分类出错概率最大的例子单独拎出来分析。 最终以99.546%正确率 排在 86/1035 …

新手如何高效运营亚马逊跨境电商:从传统SP广告到DeepBI智能策略

"为什么我的广告点击量很高但订单转化率却很低&#xff1f;""如何避免新品期广告预算被大词消耗殆尽&#xff1f;""为什么手动调整关键词和出价总是慢市场半拍&#xff1f;""竞品ASIN投放到底该怎么做才有效&#xff1f;""有没有…

【论文阅读 | CVPR 2024 | UniRGB-IR:通过适配器调优实现可见光-红外语义任务的统一框架】

论文阅读 | CVPR 2024 | UniRGB-IR&#xff1a;通过适配器调优实现可见光-红外语义任务的统一框架​1&&2. 摘要&&引言3.方法3.1 整体架构3.2 多模态特征池3.3 补充特征注入器3.4 适配器调优范式4 实验4.1 RGB-IR 目标检测4.2 RGB-IR 语义分割4.3 RGB-IR 显著目…

Hyperf 百度翻译接口实现方案

保留 HTML/XML 标签结构&#xff0c;仅翻译文本内容&#xff0c;避免破坏富文本格式。采用「HTML 解析 → 文本提取 → 批量翻译 → 回填」的流程。百度翻译集成方案&#xff1a;富文本内容翻译系统 HTML 解析 百度翻译 API 集成 文件结构 app/ ├── Controller/ │ └──…

字节跳动 VeOmni 框架开源:统一多模态训练效率飞跃!

资料来源&#xff1a;火山引擎-开发者社区 多模态时代的训练痛点&#xff0c;终于有了“特效药” 当大模型从单一语言向文本 图像 视频的多模态进化时&#xff0c;算法工程师们的训练流程却陷入了 “碎片化困境”&#xff1a; 当业务要同时迭代 DiT、LLM 与 VLM时&#xff0…

配置docker pull走http代理

之前写了一篇自建Docker镜像加速器服务的博客&#xff0c;需要用到境外服务器作为代理&#xff0c;但是一般可能没有境外服务器&#xff0c;只有http代理&#xff0c;所以如果本地使用想走代理可以用以下方式 临时生效&#xff08;只对当前终端有效&#xff09; 设置环境变量…

OpenAI 开源模型 gpt-oss 本地部署详细教程

OpenAI 最近发布了其首个开源的开放权重模型gpt-oss&#xff0c;这在AI圈引起了巨大的轰动。对于广大开发者和AI爱好者来说&#xff0c;这意味着我们终于可以在自己的机器上&#xff0c;完全本地化地运行和探索这款强大的模型了。 本教程将一步一步指导你如何在Windows和Linux…

力扣-5.最长回文子串

题目链接 5.最长回文子串 class Solution {public String longestPalindrome(String s) {boolean[][] dp new boolean[s.length()][s.length()];int maxLen 0;String str s.substring(0, 1);for (int i 0; i < s.length(); i) {dp[i][i] true;}for (int len 2; len …

Apache Ignite超时管理核心组件解析

这是一个非常关键且设计精巧的 定时任务与超时管理组件 —— GridTimeoutProcessor&#xff0c;它是 Apache Ignite 内核中负责 统一调度和处理所有异步超时事件的核心模块。&#x1f3af; 一、核心职责统一管理所有需要“在某个时间点触发”的任务或超时逻辑。它相当于 Ignite…

DAY 42 Grad-CAM与Hook函数

知识点回顾回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例# 定义一个存储梯度的列表 conv_gradients []# 定义反向钩子函数 def backward_hook(module, grad_input, grad_output):# 模块&#xff1a;当前应用钩子的模块# grad_input&#xff1a;模块输入的梯度…

基于 NVIDIA 生态的 Dynamo 风格分布式 LLM 推理架构

网罗开发&#xff08;小红书、快手、视频号同名&#xff09;大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等方…

《吃透 C++ 类和对象(中):拷贝构造函数与赋值运算符重载深度解析》

&#x1f525;个人主页&#xff1a;草莓熊Lotso &#x1f3ac;作者简介&#xff1a;C研发方向学习者 &#x1f4d6;个人专栏&#xff1a; 《C语言》 《数据结构与算法》《C语言刷题集》《Leetcode刷题指南》 ⭐️人生格言&#xff1a;生活是默默的坚持&#xff0c;毅力是永久的…

Python 环境隔离实战:venv、virtualenv 与 conda 的差异与最佳实践

那天把项目部署到测试环境&#xff0c;结果依赖冲突把服务拉崩了——本地能跑&#xff0c;线上不能跑。折腾半天才发现&#xff1a;我和同事用的不是同一套 site-packages&#xff0c;版本差异导致运行时异常。那一刻我彻底明白&#xff1a;虚拟环境不是可选项&#xff0c;它是…

[ 数据结构 ] 时间和空间复杂度

1.算法效率算法效率分析分为两种 : ①时间效率, ②空间效率 时间效率即为 时间复杂度 , 时间复杂度主要衡量一个算法的运行速度空间效率即为 空间复杂度 , 空间复杂度主要衡量一个算法所需要的额外空间2.时间复杂度2.1 时间复杂度的概念定义 : 再计算机科学中 , 算法的时间复杂…

一,设计模式-单例模式

目的设计单例模式的目的是为了解决两个问题&#xff1a;保证一个类只有一个实例这种需求是需要控制某些资源的共享权限&#xff0c;比如文件资源、数据库资源。为该实例提供一个全局访问节点相较于通过全局变量保存重要的共享对象&#xff0c;通过一个封装的类对象&#xff0c;…

AIStarter修复macOS 15兼容问题:跨平台AI项目管理新体验

AIStarter是全网唯一支持Windows、Mac和Linux的AI管理平台&#xff0c;为开发者提供便捷的AI项目管理体验。近期&#xff0c;熊哥在视频中分享了针对macOS 15系统无法打开AIStarter的修复方案&#xff0c;最新版已完美兼容。本文基于视频内容&#xff0c;详解修复细节与使用技巧…

LabVIEW 纺织检测数据传递

基于 LabVIEW 实现纺织检测系统中上位机&#xff08;PC 机&#xff09;与下位机&#xff08;单片机&#xff09;的串口数据传递&#xff0c;成功应用于煮茧机温度测量系统。通过采用特定硬件架构与软件设计&#xff0c;实现了温度数据的高效采集、传输与分析&#xff0c;操作简…

ECCV-2018《Variational Wasserstein Clustering》

核心思想 该论文提出了一个基于最优传输(optimal transportation) 理论的新型聚类方法&#xff0c;称为变分Wasserstein聚类(Variational Wasserstein Clustering, VWC)。其核心思想有三点&#xff1a;建立最优传输与k-means聚类的联系&#xff1a;作者指出k-means聚类问题本质…

部署 Docker 应用详解(MySQL + Tomcat + Nginx + Redis)

文章目录一、MySQL二、Tomcat三、Nginx四、Redis一、MySQL 搜索 MySQL 镜像下载 MySQL 镜像创建 MySQL 容器 docker run -i -t/d -p 3307:3306 --namec_mysql -v $PWD/conf:/etc/mysql/conf.d -v $PWD/logs:/logs -v $PWD/data:/var/lib/mysql -e MYSQL_ROOT_PASSWORD123456 m…