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

基本功能:

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

没完成的待办

已完成的待办

新建待办test

清除待办foo

代码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:

/**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;
}

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

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

相关文章

【动态规划】【C++算法】741摘樱桃

作者推荐 【动态规划】【数学】【C算法】18赛车 涉及知识点 动态规划 LeetCode741 摘樱桃 给你一个 n x n 的网格 grid &#xff0c;代表一块樱桃地&#xff0c;每个格子由以下三种数字的一种来表示&#xff1a; 0 表示这个格子是空的&#xff0c;所以你可以穿过它。 1 表…

【设计模式】腾讯二面:自动贩卖机/音频播放器使用了什么设计模式?

状态模式是什么&#xff1f; 状态模式&#xff0c;也被称作状态对象模式&#xff0c;是一种行为设计模式。 当一个对象的内在状态改变时&#xff0c;允许改变其行为&#xff0c;这个对象看起来像是改变了其类。 它让对象在其内部状态改变时改变自己的行为。外部调用者无需了…

Spring Boot程序的打包与运行:构建高效部署流程

引言 在现代应用开发中&#xff0c;高效的打包和部署流程对于项目的开发、测试和上线至关重要。Spring Boot作为一种快速开发框架&#xff0c;提供了方便的打包工具和内嵌式的Web服务器&#xff0c;使得打包和运行变得更加简单。本文将研究在Spring Boot应用中如何进行打包&am…

MyBatisPlus学习笔记三-核心功能

接上篇&#xff1a; MyBatisPlus学习笔记二-CSDN博客 1、核心功能-IService开发基础业务接口 1.1、介绍 1.2、引用依赖 1.3、配置文件 1.4、用例-新增 1.5、用例-删除 1.6、用例-根据id查询 1.7、用例-根据ids查询 2、核心功能-IService开发复杂业务接口 2.1、实例-更新 3、…

【C语言】编译和链接深度剖析

文章目录 &#x1f4dd;前言&#x1f320; 翻译环境和运行环境&#x1f309;翻译环境 &#x1f320;预处理&#xff08;预编译&#xff09;&#x1f309;编译 &#x1f320;词法分析&#x1f320;语法分析 &#x1f309;语义分析&#x1f320;汇编 &#x1f309; 链接&#x1f…

KubeSphere 核心实战之二【在kubesphere平台上部署redis】(实操篇 2/4)

文章目录 1、登录kubesphere平台2、redis部署分析3、redis容器启动代码4、kubesphere平台部署redis4.1、创建redis配置集4.2、创建redis工作负载4.3、创建redis服务 5、测试连接redis 在kubesphere平台上部署redis应用都是基于redis镜像进行部署的&#xff0c;所以所有的部署操…

[AI]文心一言出圈的同时,国外的ChatGPT-4.5最新资讯

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言4.5key价格泄漏ChatGPT4.0使用地址ChatGPT正确打开方式最新功能语音助手存档…

Spring Cloud 微服务中 gateway 网关如何设置健康检测端点

主要是为了让 k8s 识别到网关项目已经就绪&#xff0c;但是又不想在里面通过 Controller 实现。因为在 Controller 中这样做并不是最佳实践&#xff0c;因为 Gateway 的设计初衷是专注于路由和过滤&#xff0c;而不是业务逻辑的处理。 在 Gateway 中配置健康检查端点可以通过以…

从零开始配置vim(Windows版)

事情是这样的&#xff0c;之前linux下vim用习惯了...然后就给自己win下vscode也装了个vim插件&#xff0c;用下来还是感觉不顺手&#xff0c;并且处理太多文本时有明显卡顿&#xff0c;于是乎自己配了下win版的vim。 不过好像也并不是从零开始的...初始基础版的.vimrc有copy他们…

多行SQL转成单行SQL

如下图所示 将以上多行SQL转成单行SQL 正则表达式如下 (?s)$[^a-zA-Z()0-9]*结果如下 灵活使用,也未必只能使用Sublime Text 提供了一个在线工具

【手撕C语言 第五集】分支和循环(下)

for循环 我们已经知道了while循环&#xff0c;但是我们为什么还要一个for循环呢&#xff1f; 首先来看看for循环的语法&#xff1a; 表达式1 表达式1为初始化部分&#xff0c;用于初始化循环变量的。 表达式2 表达式2为条件判断部分&#xff0c;用于判断循环时候终止。 表达式…

Kafka集群与可靠性

Kafka集群与可靠性 1.Kafka集群搭建实战 使用两台Linux服务器&#xff1a;一台192.168.182.137 一台192.168.182.138 安装kafka首先&#xff0c;我们需要配置java环境变量&#xff08;这里就略过了&#xff09; mkdir /opt/kafka #上传压缩包kafka_2.13-3.3.1.tgz并解压 ta…

006.Oracle事务处理

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

STM32407用汇顶的GT911触摸芯片调试实盘

这个配置很关键 代码 #include "stm32f4xx.h" #include "GT9147.h" #include "Touch.h" #include "C_Touch_I2C.h" #include "usart.h" #include "delay.h" #include "LCD.h" #incl…

旅游项目day03

1. 前端整合后端发短信接口 2. 注册功能 后端提供注册接口&#xff0c;接受前端传入的参数&#xff0c;创建新的用户对象&#xff0c;保存到数据库。 接口设计&#xff1a; 实现步骤&#xff1a; 手机号码唯一性校验&#xff08;后端一定要再次校验手机号唯一性&#xff09…

贯通用友T+与企企,引领企业数字化转型新篇章!

客户介绍&#xff1a; 某科技有限公司是一家专注于高端芯片研发和制造的高科技企业。自成立以来&#xff0c;该企业始终坚持以科技创新为核心&#xff0c;致力于为全球客户提供高性能、高品质的芯片解决方案。公司拥有一支由业内资深专家和优秀工程师组成的研发团队&#xff0…

FairGuard游戏安全2023年度报告

导 读&#xff1a;2023年&#xff0c;游戏行业摆脱了疫情带来诸多负面影响&#xff0c;国内游戏市场收入与用户规模双双实现突破&#xff0c;迎来了历史新高点。但游戏黑灰产规模也在迅速扩大&#xff0c;不少游戏饱受其侵扰&#xff0c;游戏厂商愈发重视游戏安全问题。 为帮助…

Pytorch从零开始实战17

Pytorch从零开始实战——生成对抗网络入门 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——生成对抗网络入门环境准备模型定义开始训练总结 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c;Pytorch1.8cpu&#xf…

什么是DDOS高防ip?DDOS高防ip是怎么防护攻击的

随着互联网的快速发展&#xff0c;网络安全问题日益突出&#xff0c;DDoS攻击和CC攻击等网络威胁对企业和网站的正常运营造成了巨大的威胁。为了解决这些问题&#xff0c;高防IP作为一种网络安全服务应运而生。高防IP通过实时监测和分析流量&#xff0c;识别和拦截恶意流量&…

AI时代—ChatGPT-4.5的正确打开方式

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言4.5key价格泄漏ChatGPT4.0使用地址ChatGPT正确打开方式最新功能语音助手存档…