HarmonyOs学习笔记

如何在鸿蒙上搭建一个todoList

• • hml方面
  • css方面
  • js方面
  • 数据方面：
  • 具体实现效果
  • 具体代码如下：
  • • hml
    • css
    • js
    • js中引入的todoList.js文件

hml方面

使用到一个switch组件，书写格式如下：

 <switch showtext="true" checked="{{$item.status}}"  texton="完成"   textoff="待办"   class="switch"  @change="switchChange($idx)"  > </switch>

css方面

没啥说的，略过

js方面

构建一个函数用来计算剩余多少事情

computed:{ todoCount(){     let num =0;     this.todolist.forEach(element=>{  if(!element.status){      num++  }     });     return num }

然后给每个按钮设定时间就好了

数据方面：

给代办事项加上内容

export default[    { info:'给人打电话', status:true,    },    { info:'输出工作计划', status:false,    },    { info:'准备7点的会议', status:true,    },    { info:'整理资料', status:false,    },    { info:'上分', status:true,    }]

然后在js文件中引入即可

import todolist from "../../common/datas/todolist.js"

具体实现效果

具体代码如下：

hml

<div class="container">    <text class="title">待办事项</text>    <div class="item" for="{{todolist}}"> <text class="todo">{{$item.info}} </text> <switch showtext="true" checked="{{$item.status}}"  texton="完成"   textoff="待办"   class="switch"  @change="switchChange($idx)"  > </switch> <button class="remove" @click="remove($idx)">     删除 </button>    </div>    <div class="info"> <text class="info-text">您还有</text> <text class="info-num">{{todoCount}}</text> <text class="info-text">件事情待办</text>    </div>    <div class="add-todo">     <input class="plan-input" type="text"></input> <button class="plan-btn" onclick="assTodo" @click="addTodo">添加待办</button>    </div></div>

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;    heigh:24px;    allow-scale: false;}.remove{    font-size:12px;    margin-left: 10px;    width:68px;    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:35px;    background-color: #fff;}.plan-btn{    width:90px;    height: 30px;    font-size:15px;}

js

import todolist from "../../common/datas/todolist.js"export default {    data: {todolist,    },   remove(index){console.log(index)this.todolist.splice(index,)   },    switchChange(index){ this.todolist[index].status = !this.todolist[index].status    },    addTodo(){ this.todolist.push({     info:'IDE工具无法监听键盘输入',     status:false })    },    computed:{ todoCount(){     let num =0;     this.todolist.forEach(element=>{  if(!element.status){      num++  }     });     return num }    }}

js中引入的todoList.js文件

export default[    { info:'给人打电话', status:true,    },    { info:'输出工作计划', status:false,    },    { info:'准备7点的会议', status:true,    },    { info:'整理资料', status:false,    },    { info:'上分', status:true,    }]

（引入时注意路径即可）