HarmonyOS应用开发-圆角list实现

<div class="container">
    <list class="topList_corner_round_bg" scrolleffect="no">
        <list-item for="{{ topList }}" class="{{ $item.cls }}" onclick="onTopListItemClick($idx)" id="{{ $idx }} ">
            <stack>
                <div style="flex-direction : row;">
                    <stack class="div_icon">
                        <div class="item_icon" style="background-color : {{ $item.iconColor }}"></div>
                        <text class="txt_title" style="color : {{ $item.txtColor }};">{{ $item.indexTxt }}</text>
                    </stack>
                    <div class="div_right">
                        <text class="item_title">{{ $item.title }}</text>
                        <text class="item_title item_desc">{{ $item.desc }}</text>
                    </div>
                </div>
                <div class="div_arrow">
                    <image src="/common/images/list_arrow_gray.png" class="item_arrow"/>
                </div>
            </stack>

        </list-item>
    </list>

    <list class="middleList_corner_round_bg">
        <list-item for="{{ middleList }}" class="{{ $item.cls }}" onclick="onMiddleListItemClick($idx)" id="{{ $idx }}">
            <stack>
                <div style="flex-direction : row;">
                    <stack class="div_icon">
                        <div class="item_icon" style="background-color : {{ $item.iconColor }}"></div>
                        <text class="txt_title" style="color : {{ $item.txtColor }};">{{ $item.indexTxt }}</text>
                    </stack>
                    <div class="div_right">
                        <text class="item_title">{{ $item.title }}</text>
                        <text class="item_title item_desc">{{ $item.desc }}</text>
                    </div>
                </div>
                <div class="div_arrow">
                    <image src="/common/images/list_arrow_gray.png" class="item_arrow"/>
                </div>
            </stack>
        </list-item>
    </list>

    <list class="bottomList_corner_round_bg">
        <list-item for="{{ bottomList }}" class="{{ $item.cls }}" onclick="onBottomListItemClick($idx)" id="{{ $idx }}">
            <stack>
                <div style="flex-direction : row;">
                    <stack class="div_icon">
                        <div class="item_icon" style="background-color : {{ $item.iconColor }}"></div>
                        <text class="txt_title" style="color : {{ $item.txtColor }};">{{ $item.indexTxt }}</text>
                    </stack>
                    <div class="div_right">
                        <text class="item_title">{{ $item.title }}</text>
                        <text class="item_title item_desc">{{ $item.desc }}</text>
                    </div>
                </div>
                <div class="div_arrow">
                    <image src="/common/images/list_arrow_gray.png" class="item_arrow"/>
                </div>
            </stack>
        </list-item>
    </list>
</div>

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.

.container {
    flex-direction: column;
    align-items: center;
    background-color: #5e7c85;
    padding-top: 52px;
}

.topList_corner_round_bg {
    width: 100%;
    height: 240px;
    border: 1px solid #000000;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    divider-color: #000000;
    divider-height: 1px;
}

.middleList_corner_round_bg {
    width: 100%;
    height: 160px;
    border: 1px solid #000000;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    divider-color: #000000;
    divider-height: 1px;
}

.bottomList_corner_round_bg {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
    divider-color: #000000;
    divider-height: 1px;
}

/**
选中背景
*/

.list_corner_round_top {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.list_corner_round_mid {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.list_corner_round_bottom {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.list_corner_round {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: linear-gradient(270deg, #BFEEFF, #40B9FF);
}

.todo_item_top {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.todo_item_mid {
    width: 100%;
    height: 80px;
    border: 1px solid #000000;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.todo_item_bottom {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.todo_item_round {
    width: 100%;
    height: 78px;
    border: 1px solid #000000;
    border-radius: 7px;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.item_title {
    font-size: 22px;
    text-align: left;
    margin-start: 10px;
    font-weight: 600;
}

.item_desc {
    font-size: 16px;
    margin-top: 10px;
    color: #77787b;
    font-weight: 400;
}

.div_icon {
    width: 50px;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin-start: 10px;
}

.item_icon {
    height: 50px;
    width: 100%;
    align-items: center;
    border-radius: 35px;
    background-color: orange;
}

.txt_title {
    font-size: 22px;
    font-weight: 600;
}

.div_right {
    flex-direction: column;
    justify-content: center;
}

.div_arrow {
    height: 100%;
    width: 100%;
    margin-end: 10px;
    justify-content: center;
    align-items: center;
}

.item_arrow {
    margin-start: 316;
    height: 14px;
    width: 14px;
}

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.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.

import prompt from '@system.prompt';

var timeoutID;

const DURATION = 600;

export default {
    data: {
        topList: [{
                      title: 'title3_1',
                      desc: 'description3_1',
                      cls: 'todo_item_top',
                      iconColor: '#99FF0000',
                      txtColor: 'white',
                      indexTxt: 'R'
                  }, {
                      title: 'title3_2',
                      desc: 'description3_2',
                      cls: 'todo_item_mid',
                      iconColor: '#99FF7D00',
                      txtColor: 'white',
                      indexTxt: 'T'
                  }, {
                      title: 'title3_3',
                      desc: 'description3_3',
                      cls: 'todo_item_bottom',
                      iconColor: '#99FF00FF',
                      txtColor: 'white',
                      indexTxt: 'Y'
                  }
        ],
        middleList: [{
                         title: 'title2_1',
                         desc: 'description2_1',
                         cls: 'todo_item_top',
                         iconColor: '#9900FF00',
                         txtColor: 'white',
                         indexTxt: 'U'
                     }, {
                         title: 'title2_2',
                         desc: 'description2_2',
                         cls: 'todo_item_bottom',
                         iconColor: '#9900FFFF',
                         txtColor: 'white',
                         indexTxt: 'I'
                     }
        ],
        bottomList: [{
                         title: 'title1_1',
                         desc: 'description1_1',
                         cls: 'todo_item_round',
                         iconColor: '#990000FF',
                         txtColor: 'white',
                         indexTxt: 'O'
                     }
        ]
    },
    onTopListItemClick($idx) {
        console.info("id = " + $idx);
        let index = $idx;
        let size = this.topList.length;
        if (index == -1) {
            for (let i = 0; i < size; i++) {
                if (i == 0) {
                    this.topList[i].cls = "todo_item_top"
                } else if (i == size - 1) {
                    this.topList[i].cls = "todo_item_bottom"
                } else {
                    this.topList[i].cls = "todo_item_mid"
                }
            }
            return;
        }
        this.onMiddleListItemClick(-1);
        this.onBottomListItemClick(-1);
        prompt.showToast({
            message: this.topList[index].title
        });
        for (let i = 0; i < size; i++) {
            if (index == i) {
                if (i == 0) {
                    this.topList[i].cls = "list_corner_round_top"
                } else if (i == size - 1) {
                    this.topList[i].cls = "list_corner_round_bottom"
                } else {
                    this.topList[i].cls = "list_corner_round_mid"
                }

                clearTimeout(timeoutID);
                timeoutID = setTimeout(this.clearTopItemBg, DURATION);
            } else {
                if (i == 0) {
                    this.topList[i].cls = "todo_item_top"
                } else if (i == size - 1) {
                    this.topList[i].cls = "todo_item_bottom"
                } else {
                    this.topList[i].cls = "todo_item_mid"
                }
            }
        }
    },
    onMiddleListItemClick($idx) {
        console.info("id = " + $idx);
        let index = $idx;
        if (index == -1) {
            for (let i = 0; i < 2; i++) {
                if (i == 0) {
                    this.middleList[i].cls = "todo_item_top"
                } else {
                    this.middleList[i].cls = "todo_item_bottom"
                }
            }
            return;
        }
        this.onTopListItemClick(-1);
        this.onBottomListItemClick(-1)
        prompt.showToast({
            message: this.middleList[index].title
        });
        for (let i = 0; i < 2; i++) {
            if (index == i) {
                if (i == 0) {
                    this.middleList[i].cls = "list_corner_round_top"
                } else {
                    this.middleList[i].cls = "list_corner_round_bottom"
                }

                clearTimeout(timeoutID);
                timeoutID = setTimeout(this.clearMiddleItemBg, DURATION);
            } else {
                if (i == 0) {
                    this.middleList[i].cls = "todo_item_top"
                } else {
                    this.middleList[i].cls = "todo_item_bottom"
                }
            }
        }
    },
    onBottomListItemClick($idx) {
        console.info("id = " + $idx);
        let index = $idx;
        if (index == -1) {
            this.bottomList[0].cls = "todo_item_round"
            return;
        }
        this.onTopListItemClick(-1);
        this.onMiddleListItemClick(-1);
        prompt.showToast({
            message: this.bottomList[index].title
        });
        for (let i = 0; i < 2; i++) {
            this.bottomList[0].cls = "list_corner_round"
            clearTimeout(timeoutID);
            timeoutID = setTimeout(this.clearBottomItemBg, DURATION);
        }
    },
    clearTopItemBg() {
        this.onTopListItemClick(-1);
    },
    clearMiddleItemBg() {
        this.onMiddleListItemClick(-1);
    },
    clearBottomItemBg() {
        this.onBottomListItemClick(-1);
    }
}

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.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.