HarmonyOS自定义列表组件封装

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

效果展示：

 

实现步骤

①封装组件代码

hml 代码：

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

<divclass="underline">

<divclass="list-left">
<div>
<textclass="title">{{title}}text>
div>

<divclass="list-des"
if="{{subheading}}">
<textclass="list">
<span>{{subheading}}span>
text>
div>
div>

<divclass="list-right">
<switchclass="switch-list"
if="{{whether}}"
@change="switchHandle">
switch>

<imageelse@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:1pxsolid#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;
}

/*switch开关样式代码*/
.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 代码：

exportdefault{
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 代码：

<elementname="list-page"src="../../common/listitem/listitem.hml">element>
<divclass="container">
<list-pagewhether="{{true}}"
@switch-handle="showDialog"
title="标题1"
subheading="副文本">
list-page>
<list-pagewhether="{{true}}"
title="标题2">
list-page>

<list-pagewhether="{{false}}"
title="标题3">
list-page>

<list-pagewhether="{{false}}"
title="标题4"
subheading="副文本">
list-page>

div>

css 代码：

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

效果图为：

③在标题 1 加弹窗

hml 代码：

<dialogid="dataRoamDialog"class="dialog-main">
<divclass="dialog-divroaming">
<textclass="text">什么弹窗text>
<divclass="inner-txt">
<textclass="txtdistance">弹窗text>
div>

<divclass="inner-btn">
<buttontype="capsule"
value="确定"
onclick="setList"
class="btn-txt">
button>
<divclass="btn-l">div>
<buttontype="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:40px0040px;
}

.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:10px20px020px;
}

.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:010px;
}

js 代码：

exportdefault{
/**
*标题1弹窗开启
*/
showDialog(){
this.$element('dataRoamDialog').show();
},

/**
*标题1弹窗取消
*/
setList(){
this.$element('dataRoamDialog').close();
},
}

效果图：

 

总结

以上是所有的代码，写这个不难。主要用到了数据绑定跟三元运算和弹窗组件。相当于学习了OpenHarmony的开发，自己尝试封装，让自己更加了解OpenHarmony开发。欢迎各位开发者一起讨论与研究，本次分享希望对大家的学习有所帮助。

审核编辑 ：李倩