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

ゝ一世哀愁。 2022-10-11 13:59 14阅读 0赞

# 场景 #

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118383025][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118383025]

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

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

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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开关组件。

其属性为

<table> 
 <thead> 
  <tr> 
   <th> <p>名称</p> </th> 
   <th> <p>类型</p> </th> 
   <th> <p>默认值</p> </th> 
   <th> <p>必填</p> </th> 
   <th> <p>描述</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>checked</p> </td> 
   <td> <p>boolean</p> </td> 
   <td> <p>false</p> </td> 
   <td> <p>否</p> </td> 
   <td> <p>是否选中。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>showtext</p> </td> 
   <td> <p>boolean</p> </td> 
   <td> <p>false</p> </td> 
   <td> <p>否</p> </td> 
   <td> <p>是否显示文本。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>texton</p> </td> 
   <td> <p>string</p> </td> 
   <td> <p>"On"</p> </td> 
   <td> <p>否</p> </td> 
   <td> <p>选中时显示的文本。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>textoff</p> </td> 
   <td> <p>string</p> </td> 
   <td> <p>"Off"</p> </td> 
   <td> <p>否</p> </td> 
   <td> <p>未选中时显示的文本。</p> </td> 
  </tr> 
 </tbody> 
</table>

这里是否选中根据每个待办事项对象的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
        }
    ]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

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

# 效果 #

![20210701133313909.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118383025]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118383025
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/4d8a9bea563a4026befbb0e93e6bb5b7.png
[20210701133313909.gif]: /images/20221005/4bef37a2a5f8456f9fc1a7fe134e719b.png