HarmonyOS自定義列表組件封裝

根據(jù)OpenHarmony官網(wǎng)組件，結(jié)合相關(guān)技術(shù)，嘗試列表組件的封裝，提高開發(fā)的效率。

效果展示：

實(shí)現(xiàn)步驟

①封裝組件代碼

<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;
}

/*標(biāo)題樣式代碼*/
.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開關(guān)樣式代碼*/
.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:{
//數(shù)據(jù)綁定
title:{
default:''
},
//數(shù)據(jù)綁定
subheading:{
default:''
},

//true是switch開關(guān)，false是圖標(biāo)
whether:{
default:true,
type:Boolean
},

//判斷是不是switch開關(guān)列表,不是就加點(diǎn)擊陰影事件
start:{
default:true,
type:Boolean
},

},

computed:{
//判斷是不是switch開關(guān)列表,不是就加點(diǎn)擊陰影事件
start(){
return!this.whether
},
},

/**
*切換開關(guān)
*/
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="標(biāo)題1"
subheading="副文本">
list-page>
<list-pagewhether="{{true}}"
title="標(biāo)題2">
list-page>

<list-pagewhether="{{false}}"
title="標(biāo)題3">
list-page>

<list-pagewhether="{{false}}"
title="標(biāo)題4"
subheading="副文本">
list-page>

div>

css 代碼：

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

效果圖為：

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{
/**
*標(biāo)題1彈窗開啟
*/
showDialog(){
this.$element('dataRoamDialog').show();
},

/**
*標(biāo)題1彈窗取消
*/
setList(){
this.$element('dataRoamDialog').close();
},
}

效果圖：

總結(jié)