场景

鸿蒙开发-实现页面跳转与页面返回：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118383025

在上面实现从主页面跳转到todolist页面的基础上

完整实现todolist的功能，即待办事项。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先在hml中进行页面布局

<div class="container"><text class="title">待办事项</text><button @click="goback">返回</button><div class="item" for="{{todoList}}"><text class="todo">{{$item.info}}</text><switch showtext="true" checked="{{$item.status}}"texton="完成" textoff="待办"class="switch"@change="checkStatus($idx)"></switch><button class="remove" onclick="remove($idx)">删除</button></div><div class="info"><text class="info-text">您还有</text><text class="info-num">{{needTodoNum}}</text><text class="info-text">件事情待办，加油！</text></div><div class="add-todo"><input class="plan-input" type="text" onchange="getNewTodo"></input><button class="plan-btn" onclick="addTodo">添加待办</button></div>
</div>

注意这里的for循环的使用方式。

直接使用for="{{todoList}}进行列表的遍历，然后每一项的内容通过{{$item.info}}

进行显示。这里的item是固定的，info和status是对象的属性。

然后这里使用了switch开关组件。

其属性为

名称	类型	默认值	必填	描述
checked	boolean	false	否	是否选中。
showtext	boolean	false	否	是否显示文本。
texton	string	"On"	否	选中时显示的文本。
textoff	string	"Off"	否	未选中时显示的文本。

这里是否选中根据每个待办事项对象的status属性，这是个布尔类型的值。

然后change事件绑定的是当改变时的操作，通过$idx将索引传递过去。

然后还有几件代办事项的数量通过计算属性needTodoNum进行显示。

添加代表的点击事件调用的是addTodo方法。

然后再css中先渲染其样式。

.container {flex-direction: column;justify-content: flex-start;align-items: center;padding-bottom: 100px;
}
.title {font-size: 25px;margin-top: 20px;margin-bottom: 20px;color: #000000;opacity: 0.9;font-size: 28px;
}
.item{width: 325px;padding: 10px 0;flex-direction: row;align-items: center;justify-content: space-around;border-bottom: 1px solid #eee;
}
.todo{color: #000;width: 180px;font-size: 18px;
}
.switch{font-size: 12px;texton-color: green;textoff-color:red;text-padding: 5px;width: 100px;height: 24px;allow-scale: false;
}
.remove {font-size: 12px;margin-left: 10px;width: 50px;height: 22px;color: #fff;background-color: red;
}
.info{width: 100%;margin-top: 10px;justify-content: center;
}
.info-text {font-size: 18px;color: #AD7A1B;
}
.info-num{color: orangered;margin-left: 10px;margin-right: 10px;
}
.add-todo {position: fixed;left: 0;bottom: 0;width: 100%;height: 60px;flex-direction: row;justify-content: space-around;align-items: center;background-color: #ddd;
}.plan-input {width: 240px;height: 40px;background-color: #fff;
}
.plan-btn {width: 90px;height: 35px;font-size: 15px;
}

最后是在js中进行上面一些事件方法的实现

import todoList from "../../common/datas/todoList.js"
import router from '@system.router';
export default {data: {// 待办事件列表todoList,inputTodo: "IDE无法调用输入"},computed:{needTodoNum(){let num = 0;this.todoList.forEach(item => {if(!item.status){num++;}});return num;}},remove(index){console.log(index)this.todoList.splice(index,1)},addTodo() {this.todoList.push({info:this.inputTodo,status: false})},checkStatus(index){console.log(index);this.todoList[index].status = !this.todoList[index].status;},getNewTodo(e){this.inputTodo = e.value;},goback(){router.back();}
}

首先是数据源是通过导入的方式赋值给todolist。

剩余待办事项通过comouted计算属性来计算，遍历数据源todolist中状态为

false的数量。并且将其赋值给needToNum,并在页面上进行显示。

switch的change改变事件中，将其status反向。

    checkStatus(index){console.log(index);this.todoList[index].status = !this.todoList[index].status;},

删除待办事项时通过传递的索引从list中删除。

    remove(index){console.log(index)this.todoList.splice(index,1)},

添加待办事项，通过设置input的change事件

    getNewTodo(e){this.inputTodo = e.value;},

将输入的值赋值给变量inputTodo。

然后在新增按钮的点击事件中

    addTodo() {this.todoList.push({info:this.inputTodo,status: false})},

往数据源中新增一个对象。

数据源是从common下datas下todoList中引入的

export default [{info: '关注公众号',status: true},{info: '霸道的程序猿',status: false},{info: '学习编程知识',status: true},{info: '接受编程推送',status: false},{info: '努力学习',status: false}
]

注意在预览模式下新增待办事项时无法调起来键盘，所以需要在模拟器上运行。

效果

鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互相关推荐

待办事项优先级开发_如何通过创建主题待办事项确定学习内容的优先级
待办事项优先级开发 by Dan Draper 通过丹·德雷珀(Dan Draper) 如何通过创建主题待办事项确定学习内容的优先级 (How to prioritize what you lear ...
用jQuery--实现todolist待办事项清单
效果图实现todolist整体思路: 思路图如果看着不方便 js代码里面已经做好详细注释 html代码 <!DOCTYPE html> <html><head>& ...
vue实现ToDoList待办事项/清单
1.这个功能运用的知识点比较多,computed计算,watch监听,directives自定义指令和methods定义事件,还有一些属性绑定,列表渲染,表单绑定指令,按键修饰符,表单修饰符等... ...
vuex入门到实战——实现一个todoList待办清单【学习记录】
文章目录前言一.Vuex是什么? Vuex核心概念 1. State 2. Mutations 3.Actions 4.Getters 二.todoList待办清单 1.初始化项目-基于已有样式模 ...
Angular中实现一个简单的toDoList(待办事项)示例代码
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Java Eclipse开发环境搭建及注意事项
一.所需工具 (1)JDK(http://www.oracle.com/technetwork/java/javase/downloads/index.html) (2)Tomcat 7.0(http ...
鸿蒙开发-使用Storage实现数据存储
场景鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1183 ...
linux和安卓交互,Android中webview和js之间的交互及注意事项
1.Android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...
待办事项下拉html代码,SRM移动应用之待办事项模块
前言对于使用angular开发的攻程师们来说,升级是一件非常痛苦的事情.AngularJS最大版本号只有1.x,2.x/4.x的版本号都是针对于全新的框架Angular,不向后兼容导致要花费大量的时 ...

鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互

场景

实现

效果

鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互相关推荐

最新文章

热门文章