HarmonyOS 应用开发在线体验-to do list

鸿蒙时代

发布于 2021-8-14 15:36

浏览

0收藏

一、技术相关

使用语言: Js

体验内容： to do list

工具：在线开发

https://playground.harmonyos.com/#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011

二。效果如下

HarmonyOS 应用开发在线体验-to do list-鸿蒙开发者社区

三、因为在线体验模式，所以无文件，全部代码如下；

const BUTTON_STATE_IMAGE = [‘/common/checkbutton.png’, ‘/common/done.png’];

const TAG_STATE = [‘show’, ‘hide’];

const TEXT_COLOR = [‘text-default’, ‘text-gray’];

const EVENT_LEVEL = [‘urgent’, ‘senior’, ‘middle’, ‘low’];

export default {

title: "每日计划",

taskList: [

    {

        id: 'id-1',

        event: '起床锻炼',

        time: '07:30',

        checkBtn: BUTTON_STATE_IMAGE[1],

        color: TEXT_COLOR[1],

        showTag: TAG_STATE[1],

        tag: EVENT_LEVEL[1],

    },

    {

        id: 'id-2',

        event: '饭后午休',

        time: '01:30',

        checkBtn: BUTTON_STATE_IMAGE[0],

        color: TEXT_COLOR[0],

        showTag: TAG_STATE[0],

        tag: EVENT_LEVEL[0],

    },

    {

        id: 'id-3',

        event: '认真学习',

        time: '19:30',

        checkBtn: BUTTON_STATE_IMAGE[0],

        color: TEXT_COLOR[0],

        showTag: TAG_STATE[0],

        tag: EVENT_LEVEL[2],

    },

     {

        id: 'id-4',

        event: '洗漱睡觉',

        time: '22:30',

        checkBtn: BUTTON_STATE_IMAGE[0],

        color: TEXT_COLOR[0],

        showTag: TAG_STATE[0],

        tag: EVENT_LEVEL[3],

    },

]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.

};

Css

.container {

flex-direction: column;

background-color: rgb(107, 134, 156);
1.
2.
3.

}

.title {

font-weight: 600;

color: rgb(241, 239, 239);

background-color: rgb(6, 152, 236);

opacity: 1;
1.
2.
3.
4.
5.
6.
7.

}

.tag-list {

width: 100%;

margin-top: 10px;

padding: 20px;
1.
2.
3.
4.
5.

}

.todo-list-item {

width: 100%;
1.

}

.todo-item {

width: 100%;

border-radius: 2px;

align-items: center;
1.
2.
3.
4.
5.

}

.flex-row {

display: flex;

flex-direction: row;

align-items: center;
1.
2.
3.
4.
5.

}

.todo-name-mark {

padding-left: 20px;

width: 100%;

height: 100%;

align-items: center;
1.
2.
3.
4.
5.
6.
7.

}

.todo-name {

font-size: 15px;

color: white;

margin-right: 2px;

max-lines: 1;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

display: inline-block;

vertical-align: middle;

padding-top: 5px;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

}

.text-default {

color: white;
1.

}

.text-gray {

color: rgb(6, 6, 6);
1.

}

.todo-mark {

width: 10px;

height: 10px;



margin-left: 8px;

border-radius: 25px;

background-color: lightslategrey;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

}

.todo-time {

font-size: 20px;

width: 100%;

height: 100%;

text-align: left;

color: rgb(249, 247, 247);

margin-top:1px;

padding-left: 18px;
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

}

.urgent {

background-color: firebrick;
1.

}

.senior {

background-color: gold;
1.

}

.middle {

background-color: mediumaquamarine;
1.

}

.low {

background-color: #0D9FFB;
1.

}

.hide {

display: none;
1.

}

.show {

display: inline-block;
1.

}

.todo-image {

width: 30px;

height: 30px;

object-fit: contain;

margin-top: 1px;
1.
2.
3.
4.
5.
6.
7.

}

.todo-text-wrapper {

height: 100%;

flex-grow: 1;

margin: 0px 26px;

flex-direction: column;
1.
2.
3.
4.
5.
6.
7.

}

@media (device-type: tv) {

.title {

    font-size: 22px;

    padding: 10px;

}

.tag-list {

    padding-top:30px;

    padding-left:12px;

}

.todo-list-item {

    margin-top: 20px;

}

.todo-image {

    width: 20px;

    height: 20px;

}

.todo-name {

    font-size: 18px;

    max-width: 460px

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

}

@media (device-type: phone) {

.title {

    font-size: 21px;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 10px;

}

.tag-list {

    padding-top:48px;

}

.todo-list-item {

    margin: 2px 8px;

}

.todo-name-mark {

    margin: 5px 0px;

}

.todo-name {

    max-width: 180px;

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

}

@media (device-type: wearable) {

.title {

    font-size: 26px;

    width: 100%;

    height: 54px;

    text-align: center;

}

.tag-list {

    padding-top:54px;

}

.todo-list-item {

    padding-left: 50px;

    padding-right: 25px;

}

.todo-name-mark {

    margin: 3px 0px;

}

.todo-name {

    max-width: 106px

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

}

Hml

<text class="title">

    {{title}}

</text>

<list class="tag-list">

    <list-item for="{{taskList}}" class="todo-list-item" focusable="false">

        <div class="todo-item flex-row">

            <image class="todo-image" src="{{$item.checkBtn}}" onclick="completeEvent({{$item.id}})"></image>

            <div class="todo-text-wrapper">

                <div class="todo-name-mark">

                    <text class="todo-name {{$item.color}}" focusable="false">{{$item.event}}</text>

                    <text class="todo-mark {{$item.tag}} {{$item.showTag}}"></text>

                </div>

                <text class="todo-time">{{$item.time}}</text>

            </div>

        </div>

    </list-item>

</list>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.