小程序样例1:简单待办列表

这篇具有很好参考价值的文章主要介绍了小程序样例1:简单待办列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基本功能:

显示所有待办列表(点击不同的文本进行显示)

小程序样例1:简单待办列表,小程序,apache

没完成的待办

小程序样例1:简单待办列表,小程序,apache

已完成的待办

小程序样例1:简单待办列表,小程序,apache

新建待办test

小程序样例1:简单待办列表,小程序,apache

清除待办foo

小程序样例1:简单待办列表,小程序,apache

代码js文件:

//index.js
//获取应用实例
const app = getApp();
Page({
  data: {
    todo: '',
    todos: [
      {
        "id": 1474894720002,
        "todo": "foo",
        "completed": false
      },
      {
        "id": 1474894720922,
        "todo": "bar",
        "completed": true
      },
      {
        "id": 1474894723594,
        "todo": "baz",
        "completed": false
      }
    ],
    filterTodos: [],
    filter: 'all',
    activeCount: 0,
  },
  bindTodoInput(e) {
    this.setData({
      todo: e.detail.value
    });
  },
  saveTodo(e) {
    if (this.data.todo.trim().length === 0) {
      return;
    }

    const newTodo = {
      id: new Date().getTime(),
      todo: this.data.todo,
      completed: false,
    };
    
    this.setData({
      todo: '',
      todos: this.data.todos.concat(newTodo),
      filterTodos: this.data.filterTodos.concat(newTodo), 
      activeCount: this.data.activeCount + 1,
    });
  },

  todoFilter(filter, todos) {
    return filter === 'all' ? todos
      : todos.filter(x => x.completed === (filter !== 'active'));
  },
  toggleTodo(e) {
    const { todoId } = e.currentTarget.dataset;
    const { filter, activeCount } = this.data;
    let { todos } = this.data;
    let completed = false;
    todos = todos.map(todo => {
      if (Number(todoId) === todo.id) {
        todo.completed = !todo.completed;
        completed = todo.completed;
      }
      return todo;
    });
    const filterTodos = this.todoFilter(filter, todos);
    this.setData({
      todos,
      filterTodos,
      activeCount: completed ? activeCount - 1 : activeCount + 1,
    });
  },
  useFilter(e) {
    const { filter } = e.currentTarget.dataset;
    const { todos } = this.data;
    const filterTodos = this.todoFilter(filter, todos);
    this.setData({
      filter,
      filterTodos,
    });
  },
  clearCompleted() {
    const { filter } = this.data;
    let { todos } = this.data;
    todos = todos.filter(x => !x.completed);
    this.setData({
      todos,
      filterTodos: this.todoFilter(filter, todos),
    });
  },
  todoDel(e) {
    const { todoId } = e.currentTarget.dataset;
    const { filter, activeCount } = this.data;
    let { todos } = this.data;
    const todo = todos.find(x => Number(todoId) === x.id);
    todos = todos.filter(x => Number(todoId) !== x.id);
    this.setData({
      todos,
      filterTodos: this.todoFilter(filter, todos),
      activeCount: todo.completed ? activeCount : activeCount - 1,
    });
  },
  onLoad() {
    console.log('onLoad');
    const that = this;
    const activeCount = this.data.todos
          .map(x => x.completed ? 0 : 1)
          .reduce((a, b) => a + b, 0);
    that.setData({
      activeCount,
      filterTodos: this.data.todos
    });
  }
});

wxml:

<scroll-view class="container" scroll-y="true">
  <view class="todo">
    <input class="new-todo"
      placeholder="添加待办列表"
      value="{{todo}}"
      bindinput="bindTodoInput"
    />
    <button type="primary" class="new-todo-save" bindtap="saveTodo">→</button>
  </view>
  
  <view class="todo-footer">
    <text class="total">{{activeCount}} 个待办</text>
    <view class="filter">
      <text bindtap="useFilter"
        data-filter="all"
        class="{{ filter === 'all' ? 'filter-item filter-active' : 'filter-item'}}"
       >所有</text>
      <text bindtap="useFilter"
        data-filter="active"
        class="{{ filter === 'active' ? 'filter-item filter-active' : 'filter-item'}}"       >待办</text>
      <text bindtap="useFilter"
        data-filter="completed"
        class="{{ filter === 'completed' ? 'filter-item filter-active' : 'filter-item'}}"
      >已完成</text>
    </view>
    <text wx:if="{{ todos.length - activeCount != 0 }}" class="clear" bindtap="clearCompleted">清除完成项</text>
    <text wx:else class="clear-empty"></text>
  </view>
  <view class="todo-list">
    <view class="todo-item" wx:for="{{filterTodos}}" wx:key="id">
      <icon bindtap="toggleTodo" class="todo-check"
        data-todo-id="{{item.id}}"
        type="{{ item.completed ? 'success_circle' : 'circle'}}" />
      <text class="{{ item.completed ? 'todo-content todo-completed' : 'todo-content'}}">{{item.todo}}</text>
      <icon bindtap="todoDel" class="todo-del" data-todo-id="{{item.id}}" type="cancel" />
    </view>
  </view>
</scroll-view>

wxss:文章来源地址https://www.toymoban.com/news/detail-797731.html

/**index.wxss**/
.todo {
  margin: 20rpx;
  display: flex;
  align-items: center;
  background: #F5F5F5;
  height: 70rpx;
}

.new-todo {
  border: none;
  font-style: italic;
  width: 100%;
}

.new-todo-save {
  font-size: 28rpx
}

.todo-list {
  margin: 20rpx;
  display: flex;
  flex-direction: column;
  flex-grow: 2;
}

.todo-item {
  display: flex;
  height: 80rpx;
  position: relative;
}

.todo-check {
  margin-top: -6rpx;
}

.todo-del {
  margin-top: -6rpx;
  position: absolute;
  right: 20rpx;
}

.todo-content {
  margin-left: 20rpx;
}

.todo-completed {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.filter {
  display: flex;
  flex-direction: row;
}

.filter-item {
  margin-left: 10rpx;
  padding: 6rpx 14rpx;
}

.filter-active {
  border: 1px solid;
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-empty {
  width: 120rpx;
  height: 24rpx;
}

到了这里,关于小程序样例1:简单待办列表的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • iOS开发Swift-12-列表UI,TableViewController,动态响应Button勾选-待办事项App(1)

    1.创建新项目 为项目添加图标 2.将Table View Controller添加到界面中 将箭头移动到Table View上来,代表它是首页(根页面).选中ViewController,点击Delete,对它进行删除.将代码ViewController.swift也删除掉. 新建一个Cocoa Touch Class. 将TableViewController的class设置成TodosViewController. 2.为cell取名为TodoC

    2024年02月09日
    浏览(52)
  • C#中UDP的简单使用+样例

    发送:         --发送的数据是byte类型,指定ip和端口 接收:         --需要开个线程不停地调用Receive 样例:GitHub - zzp229/UDP-: 使用wpf实现一个基于UDP的额聊天系统,包括发群聊、私信、图片和文件 稍微大点的图片或文件就需要分包才能发送,只实现了发送文字和发送小图

    2024年02月04日
    浏览(30)
  • 远程线程注入(简单样例以及原理)

    注入的目标是将我们的代码注入到目标进程的地址空间中 注入通常可以根据注入的内容分为两种类型: shellcode注入 :这种注入是将我们的代码直接注入到目标内存中,这就要保证我们的代码在贴到其他地址上后仍然能够正常执行 :这种方式优点是不容易检测,因为他的特征

    2024年02月12日
    浏览(29)
  • Spring Cloud学习笔记:Eureka简介,Eureka简单样例

    这是本人学习的总结,主要学习资料如下 - 马士兵教育 Eureka 是 SpringCloud Nexflix 的核心子模块,其中包含 Server 和 Client 。 Server 提供服务注册,存储所有可用服务节点。 Client 用于简化和 Server 的通讯复杂度。 下面是 Eureka 的简单架构图 每一个服务节点需要在 Eureka Server 中注册

    2024年04月16日
    浏览(50)
  • 【PC电脑windows环境下-[jetson-orin-NX]Linux环境下-下载工具esptool工具使用-相关细节-简单样例-实际操作】

    硬件信息:开发板 ESP32-S3-DevKitM-1(EPS32-S3-wroom-1模块) 其它硬件:一个usb-type-c连接线。 软件环境:ESP-IDF 5.0 PowerShell 、vscode ESP32对自己来说还是比较新的,最近也是刚刚接触,这里对自己使用ESP32进行简单说明。 博文链接:【在英伟达nvidia的jetson-orin-nx和PC电脑ubuntu20.04上-装

    2024年02月05日
    浏览(60)
  • 【PC电脑windows-学习样例tusb_serial_device-ESP32的USB模拟串口程序+VScode建立工程+usb组件添加+-基础样例学习】

    最为新手,想要快速入门相关设备,比如ESP32,可能最好的方式就是直接手动去敲一遍代码,而USB模拟串口其中一个应用,自己作为新手,虽然只是简单运行这个历程,但是认为依然有记录的价值。自己感觉官网样例还是有点晦涩难懂,今天我们就是学习这个样例。 ESP32说明

    2024年02月06日
    浏览(50)
  • Apache POI 之简单介绍

    什么是Apache POI? Apache POI是一种流行的API,允许程序员使用Java程序创建,修改和显示MS Office文件。它是由Apache Software Foundation开发和分发的开源库,用于使用Java程序设计或修改Microsoft Office文件。它包含将用户输入数据或文件解码为MS Office文档的类和方法。 Apache POI的组件 A

    2024年02月07日
    浏览(38)
  • react渲染列表信息(简单易学)

    1.新建个文件夹,启动终端,使用 create-react-app my-react 命令创建项目,其中my-react是自定义项目名称。 2.删除根目录src文件夹下多余文件,保留index.js和index.css文件 3.安装scss需要的依赖,使用npm install --save node-sass,npm install --save sass-loader命令进行安装并在根文件夹处引入 4.引

    2024年04月10日
    浏览(36)
  • Apache httpd 入门实战(2)--简单使用

    本文主要介绍 Apache 的实际使用,文中所使用到的软件版本:Centos 7.9.2009、Httpd 2.4.55。 涉及到 Https 站点时,安装 Apache 时需要启用 ssl,可参考 Apache httpd 入门实战(1)--概念及安装。 打开 conf/httpd.conf 文件,修改或新增相应的配置项: 新建 conf/extra/my-vhosts.conf 文件: 代理地址

    2023年04月16日
    浏览(41)
  • HarmonyOS应用开发学习笔记 UI布局学习 List(){}创建列表 列表形式显示 简单使用

    List 创建列表 列表形式显示 官方文档:创建列表(List) 关键代码 List(){} 列表控件 ListItem() {} 子元素 例如 关键代码:listDirection(Axis.Horizontal) 默认竖直方向 Axis.Vertical 分隔线的宽度会使ListItem之间存在一定间隔,当List设置的内容间距小于分隔线宽度时,ListItem之间的间隔会使用

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包