HarmonyOS应用开发教程 圆角list实现
效果展示：
hml
{{ $item.indextxt }} {{ $item.title }}{{ $item.desc }}
{{ $item.indextxt }} {{ $item.title }}{{ $item.desc }}
{{ $item.indextxt }} {{ $item.title }}{{ $item.desc }}
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); }}
C650通常车床继电触摸器操控电路
EPM240T100型号 EPM240T100具有哪些特点
移动通信技术企业东方通信发布2021年报
全球智能可穿戴设备,80%来自深圳
!租售/收购/维修HP8593E频谱分析仪HP8593E 小
HarmonyOS应用开发教程 圆角list实现
判断PLC接近开关是PNP还是NPN的方法
构建模拟开关宏模型来提高仿真水平
比特币现金省钱的五大方法介绍
低成本四通道运算放大器驱动RF调制器
电路板层数怎么看
硬件小百科：单片机串行口介绍
LED数显驱动IC VK1624 SOP24介绍
40台燃料电池发动机助上海世博减排
芯片生产工艺流程及设备
腾讯重走九宫格 向互联网全军出击
如何减少PCB板内的串扰
关于电动汽车整车控制器的性能分析和应用介绍
惊暴价！全新原装手机全场4折大甩卖
擎朗智能完成新一轮融资 发力送餐机器人市场
hml
{{ $item.indextxt }} {{ $item.title }}{{ $item.desc }}
{{ $item.indextxt }} {{ $item.title }}{{ $item.desc }}
{{ $item.indextxt }} {{ $item.title }}{{ $item.desc }}
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); }}
C650通常车床继电触摸器操控电路
EPM240T100型号 EPM240T100具有哪些特点
移动通信技术企业东方通信发布2021年报
全球智能可穿戴设备,80%来自深圳
!租售/收购/维修HP8593E频谱分析仪HP8593E 小
HarmonyOS应用开发教程 圆角list实现
判断PLC接近开关是PNP还是NPN的方法
构建模拟开关宏模型来提高仿真水平
比特币现金省钱的五大方法介绍
低成本四通道运算放大器驱动RF调制器
电路板层数怎么看
硬件小百科：单片机串行口介绍
LED数显驱动IC VK1624 SOP24介绍
40台燃料电池发动机助上海世博减排
芯片生产工艺流程及设备
腾讯重走九宫格 向互联网全军出击
如何减少PCB板内的串扰
关于电动汽车整车控制器的性能分析和应用介绍
惊暴价！全新原装手机全场4折大甩卖
擎朗智能完成新一轮融资 发力送餐机器人市场