文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HarmonyOS 自定义列表组件

2024-12-02 03:00

关注

​想了解更多内容,请访问:​

​51CTO OpenHarmony技术社区​

​https://ost.51cto.com​

前言

根据鸿蒙官网组件,结合相关技术,尝试列表组件的封装,提高开发的效率。

效果展示

实现步骤

封装组件代码:

hml代码:


<div class="container {{ start ? 'background' : '' }}">

<div class="underline" >

<div class="list-left">
<div>
<text class="title">{{ title }}</text>
</div>

<div class="list-des"
if="{{ subheading }}">
<text class="list">
<span>{{ subheading }}</span>
</text>
</div>
</div>

<div class="list-right">
<switch class="switch-list"
if="{{ whether }}"
@change="switchHandle">
</switch>

<image else @click="launch()" class="list-icon" src="../images/right.png">
</image>
</div>
</div>
</div>

css代码:

.container {
justify-content: center;
align-items: center;
padding-left: 48px;
padding-right: 35px;
overscroll-effect: spring;
}
.background:active {
background-color: #f6f6f6;
}
.underline {
border-bottom: 1px solid #ccc;
}

.list-left {
flex: 1;
flex-direction: column;
justify-content: center;
}

.title {
font-family: FZLTHJW--GB1-0;
font-size: 32px;
color: rgba(0, 0, 0, 0.9);
letter-spacing: 0;
font-weight: 400;
height: 70px;
}
.list-des {
width: 530px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.list {
font-family: HarmonyOS_Sans;
font-size: 28px;
color: rgba(0, 0, 0, 0.6);
letter-spacing: 0;
line-height: 35px;
font-weight: 400;
padding-bottom: 2px;
}

.list-right {
justify-content: flex-end;
width: 115px;
min-height: 100px;
align-items: center;
}
.switch-list {
width: 115px;
height: 120px;
}
.list-icon {
width: 14px;
height: 26px;
right: 20px;
}

js代码:

export default {
props: {
//数据绑定
title: {
default: ''
},
//数据绑定
subheading: {
default: ''
},
//true是switch开关,false是图标
whether: {
default: true,
type:Boolean
},
//判断是不是switch开关列表,不是就加点击阴影事件
start: {
default: true,
type:Boolean
},

},
computed: {
//判断是不是switch开关列表,不是就加点击阴影事件
start() {
return !this.whether
},
},

switchHandle({checked: checkedValue}) {
this.$emit('switchHandle', checkedValue);
this.checkStatus = checkedValue;
},
};

引入组件代码,实现列表功能:

hml代码:

  <element name="list-page" src="../../common/listitem/listitem.hml"></element>
<div class="container">
<list-page whether="{{ true }}"
@switch-handle="showDialog"
title="1"
subheading="副文本">
</list-page>
<list-page whether="{{ true }}"
title="2">
</list-page>
<list-page whether="{{ false }}"
title="3">
</list-page>
<list-page whether="{{ false }}"
title="4"
subheading="副文本">
</list-page>
</div>

css代码:

.container {
flex-direction: column;
color: #fff;
background-color: #fff;
overscroll-effect: spring;
}

效果图为:

在1加弹窗:

hml代码:


<dialog id="dataRoamDialog" class="dialog-main">
<div class="dialog-div roaming">
<text class="text ">什么弹窗</text>
<div class="inner-txt">
<text class="txt distance">弹窗</text>
</div>

<div class="inner-btn">
<button type="capsule"
value="确定"
onclick="setList"
class="btn-txt">
</button>
<div class="btn-l"></div>
<button type="capsule"
value="取消"
onclick="setList"
class="btn-txt">
</button>
</div>
</div>
</dialog>

css代码:


.dialog-main {
width: 95%;
}
.dialog-div {
flex-direction: column;
align-items: flex-start;
}
.roaming {
height: 340px;
}
.text {
font-family: HarmonyOS_Sans_Medium;
font-size: 36px;
color: rgba(0, 0, 0, 0.9);
letter-spacing: 0;
line-height: 38px;
font-weight: bold;
height: 112px;
padding: 40px 0 0 40px;
}
.inner-txt {
width: 90%;
}
.txt {
font-family: HarmonyOS_Sans;
font-size: 32px;
color: rgba(0, 0, 0, 0.9);
letter-spacing: 0;
line-height: 38px;
font-weight: 400;
flex: 1;
height: 75px;
justify-content: space-between;
font-family: PingFangSC-Regular;
}
.distance {
padding-left: 40px;
margin-top: 20px;

.inner-btn {
width: 100%;
height: 120px;
line-height: 80px;
justify-content: center;
align-items: center;
margin: 10px 20px 0 20px;
}
.btn-txt {
width: 230px;
height: 80px;
font-size: 32px;
text-color: #1e90ff;
background-color: #fff;
text-align: left;
align-items: center;
flex: 1;
text-align: center;
}
.btn-l {
width: 2px;
height: 50px;
background-color: #ccc;
margin: 0 10px;
}

js代码:

export default {

showDialog() {
this.$element('dataRoamDialog').show();
},

setList() {
this.$element('dataRoamDialog').close();
},
}

效果图:

总结

以上是所有的代码,写这个不难。主要用到了数据绑定跟三元运算和弹窗组件。相当于学习了鸿蒙的开发,自己尝试封装,让自己更加了解鸿蒙开发。本次分享希望对大家的学习有所帮助。

​想了解更多内容,请访问:​

​51CTO OpenHarmony技术社区​

​https://ost.51cto.com​

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯