鸿蒙js开发7 鸿蒙列表的增删改查 原创

本文主要描述了对列表数据的添加和删除

视图及样式：

<div class="container">
    <list class="listdiv">
        <block for="{{str}}">
            <list-item class="list-item">
                <text class="textdiv">{{$item}}</text>
                <button class="buttondiv" onclick="add">添加</button>
                <button class="buttondiv" onclick="del({{$idx}})">删除</button>
            </list-item>
        </block>
    </list>

    <!--初始不显示，点击添加按钮时触发方法-->
    <dialog id="dialogid" class="dialogdiv">
        <div class="dialog">
            <input class="imputdiv" placeholder="请输入要添加的内容" id="inputid"
                    onchange="addstrchange"></input>
            <div class="button1">
                <button value="确定" onclick="addstr"></button>
                <button value="取消" onclick="colse"></button>
            </div>
        </div>
    </dialog>
</div>

.container {
    width: 100%;
    height: 1500px;
}
.listdiv{
    width: 100%;
    height: 100%;
}
.list-item{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid black;
}
.textdiv{
    font-size: 30px;
    font-weight: bold;
}
.buttondiv{
    width: 25%;
    height: 30%;
}
.dialogdiv{
    width: 100%;
    height: 30%;
}
.dialog{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.imputdiv{
    width: 100%;
    height: 35%;
}
.button1{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: row;
}

效果图：

业务逻辑层：

import prompt from '@system.prompt';

export default {
    data: {
        str:["订单1","订单2","订单3","订单4","订单5","订单6","订单7"],
        adddata:""
    },

    //点击删除按钮时触发此方法
    del(index){
        //调试
//        prompt.showToast({
//            message:"点击的删除项下标为:"+index
//        });

        //重名名this关键字，在下方success函数中避免关键字同名
        let that = this;

        //点击删除时弹出对话框
        prompt.showDialog({
            title:"操作提示",
            message:"您确定要删除此项么?",
            buttons:[{"text":"确定","color":""},
                     {"text":"取消","color":""}],
            success:function(data){
                //调试
//                prompt.showToast({
//                    message:"点击的操作下标为:"+data.index
//                });

                if(data.index==0){
                    //js数组 内置的splice方法
                    //从数组下标为index的位置开始删除1个数据
                    that.str.splice(index,1)
                }else{
                    prompt.showToast({
                        message:"您取消了删除操作",
                        duration:3000
                    })
                }
            }
        });
    },
    //点击添加按钮时触发，显示出<dialog>对话框
    add(){
        this.$element("dialogid").show();
    },
    addstrchange(data){
        this.adddata = data.value;
        prompt.showToast({
            message:"获取的输入框的内容为:"+data.value
        });
    },
    addstr(){
        //提示框显示获取的内容为undefined
        let content = this.$element("inputid").value;
        prompt.showToast({
            message:"获取到输入框的内容为:"+content
        });

        //在头部添加
        //this.str.unshift(this.adddata);
        //在尾部添加
        this.str.push(this.adddata);

        this.$element("dialogid").close();
    },
    colse(){
        this.$element("dialogid").close();
    }

}