Uniapp 基础实战：1 小时做一个 Todo 列表

原创

于 2025-09-04 07:15:00 发布 · 250 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本教程将带您在1小时内完成一个完整的Todo应用，覆盖页面设计、API调用和组件开发。最终效果包含任务管理、状态切换和本地存储功能。

一、项目结构

pages/
  index/
    index.vue       # 主页面
components/
  todo-item.vue     # 自定义任务组件
static/
  icons/            # 图标资源

二、核心功能实现

1. 页面布局 (pages/index/index.vue)

<template>
  <view class="container">
    <!-- 标题区 -->
    <view class="header">
      <text class="title">今日任务</text>
      <text class="count">已完成: $completedCount$/$totalCount$</text>
    </view>

    <!-- 输入框 -->
    <view class="input-area">
      <input 
        v-model="newTask" 
        placeholder="添加新任务..." 
        @confirm="addTask"
      />
      <button @click="addTask">添加</button>
    </view>

    <!-- 任务列表 -->
    <scroll-view scroll-y class="list-container">
      <todo-item