#星光计划2.0# OpenHarmony ArkUI+原生绘图之幸运大转盘(二) 原创 精华

【本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0】

活动链接: https://harmonyos.51cto.com/posts/9422

在原有抽奖的功能上，继续开发菜单功能，支持对奖项的数量、内容进行动态修改。
@[toc]

效果展示

gif超过3.5M不能上传。。。。。

主要功能

1. 实现界面跳转，可以进入菜单界面。

2. 奖项可以增加，删除。

3. 奖项内容可自由编辑。

具体代码

menuPage.hml

<div class="container">
    <text class="title">  {{ title }} </text>
    <!--奖品列表-->
    <list class="list" scrollbar="on" scrolleffect="spring" updateeffect="true">
        <list-item for="{{ infoArr }}" class="list-item">
            <!--奖品名-->
            <input id="input-text" class="input-text" type="text"
                   maxlength="6" placeholder="{{ $item.name }}"
                   onchange="changeEvent({{ $item.name }})">
            </input>
            <!--删除按钮-->
            <input class="delete-btn" type="button"
                   value="—" onclick="deleteEvent({{ $item.name }})">
            </input>
        </list-item>
    </list>
    <!--跳转按钮-->
    <div class="btns">
        <button class="button" type="capsule" onclick="gotoMainPage"> 返回 </button>
        <button class="button" type="capsule" onclick="add"> 添加 </button>
    </div>
    <!--添加奖品对话框-->
    <dialog id="dialog" oncancel="cancel" >
        <div class="dialog-div">
            <!--标题与提示-->
            <div class="dialog-text">
                <text class="topic-txt"> 添加奖品 </text>
                <text class="remind-txt"> 请输入奖品名 </text>
            </div>
            <!--输入栏-->
            <textarea placeholder="{{ $name }}" onchange="getName" class="area" extend="true"></textarea>
            <!--取消与确定-->
            <div class="dialog-btn">
                <button type="text" value="取消" onclick="cancel" class="inner-btn"></button>
                <button type="text" value="确定" onclick="ok" class="inner-btn"></button>
            </div>
        </div>
    </dialog>
</div>

list是以infoArr来初始化的，当infoArr内容改变时，界面能即时更新。现时对每个奖项的删除按钮绑定点击事件，通过区分不同的name来删除指定奖项。

menuPage.css

.container {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.title {
    height: 15%;
    font-size: 38px;
    font-weight: bold;
}

.list {
    height: 60%;
    width: 95%;
    border: 5px solid green;
    flex-direction: column;
    padding-left: 2%;
    padding-right: 2%;
}

.list-item {
    height: 15%;
    align-items: center;
}

.input-text {
    height: 90%;
    font-size: 30px;
    background-color: antiquewhite;
}

.delete-btn {
    margin-right: 15%;
    margin-left: 5%;
    font-weight: 900;
    font-size: 25px;
}

.btns {
    margin-top: 5%;
    justify-content:space-around;
}

.button{
    height: 10%;
    font-size: 30px;
    font-weight: 600;
}

.dialog-div {
    flex-direction: column;
    align-items: center;
}

.dialog-text {
    width: 320px;
    height: 160px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.topic-txt {
    font-family: serif;
    color: #1E90FF;
    font-size: 25px;
}

.remind-txt {
    color: #a9a9a9;
    font-size: 20px;
}

.area {
    color: #1E90FF;
    width: 50%;
    height: 40px;
    font-size: 20px;
}

.dialog-btn {
    width: 100%;
    height: 20%;
    justify-content: space-around;
}

.inner-btn {
    font-size: 20px;
    text-color: #1E90FF;
    font-weight: 600;
}

删除按钮没有使用图片资源，简化使用—代替。

menuPage.js

import router from '@system.router';
export default {
    data: {
        title: "奖品列表",
        //1.1添加项目时存放奖品名
        name: "",
    },

    //2.返回主界面
    gotoMainPage() {
        //router.back();
        //2.1页面路由清理
        //这里不能使用back,目前的API中如果需要在界面跳转时携带参数,只能使用push
        //但是一直push就需要使用clear防止一直压栈,clear带来的影响就是每次都需要重新加载界面
        //由于index中的canvas是通过onShow加载的,虽然每次调出转盘时,会出现卡顿现象(转盘绘制慢)
        router.clear();
        router.push ({
            uri: 'pages/index/index',
            params: {
                infoArr: this.infoArr,
            }
        });
    },

    //2.奖项内容编辑
    changeEvent(name, e) {
        //2.1模拟器中需要屏蔽这个函数,远程模拟器中运行正常
        //在模拟器会在onShow中,即使没有对内容进行编辑,也会调用input中的onchange事件,感觉是bug
        let num = 0;
        for(var i of this.infoArr) {
            if (i.name == name) {
                this.infoArr[num].name = e.value;
                return;
            }
            num++;
        }
    },

    //3.删除奖项
    deleteEvent: function (name) {
        console.log("delete name is " + name);
        //3.1通过name绑定各个删除按钮与其对应的奖项
        let num = 0;
        for(var i of this.infoArr) {
            if (i.name == name) {
                this.infoArr.splice(num,1);
                return;
            }
            num++;
        }
    },

    //4.弹出添加奖项对话框
    add: function () {
        this.$element('dialog').show();
    },

    //5.点击取消,对话框关闭
    cancel: function () {
        this.$element('dialog').close();
    },

    //6.点击确定,如果名字不为空,添加对应奖项,同时关闭对话框
    ok: function () {
        if (this.name !== '') {
            // 6.1array不支持insert,为了插入到倒数第二的位置,先删除末尾的未中奖,再添加奖项、未中奖
            this.infoArr.pop();
            this.infoArr.push({name:this.name});
            this.infoArr.push({name:"未中奖"});
        }
        this.$element('dialog').close()
    },

    //7.对话框输入内容改变时,保存奖项名字
    getName(e) {
        this.name = e.value;
    },
}

2.1中的函数在模拟器中运行需要屏蔽，远程模拟器中运行则不需要。

下面是些需要特殊注意的点：

//1 deleteEvent
按钮的点击事件中，如果需要传参，需要在函数名后加Event, 如果使用delete作为函数名会发现调用失败
//2 router.push()
界面路由跳转中可以使用router.back()返回之前的界面，但是界面之间传参需要使用push
//3.array.insert()
arrary中有pop、push、splice，没有insert，需要自己实现