HarmonyOs学习笔记

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,
    }
]

（引入时注意路径即可）