回复
添加资源
添加资源将有机会获得更多曝光，你也可以直接关联已上传资源
去关联
HarmonyOS应用开发-圆角list实现
鸿蒙时代
发布于 2022-4-9 10:28
浏览
0收藏
效果展示：
Hml
<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>
Css
.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;
}
Js
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);
}
}
标签
HarmonyOS应用开发-圆角list实现.docx 135.98K 11次下载
赞
1
收藏
回复
相关推荐
