根據鴻蒙官網組件，結合相關技術，嘗試列表組件的封裝，提高開發的效率。
?
前言
根據鴻蒙官網組件，結合相關技術，嘗試列表組件的封裝，提高開發的效率。
效果展示
實現步驟
封裝組件代碼:
hml代碼:
<!--start判斷是不是switch開關列表,不是就加點擊陰影事件-->
<div class="container {{ start ? 'background' : '' }}">
<!--下劃線-->
<div class="underline" >
<!--標題-->
<div class="list-left">
<div>
<text class="title">{{ title }}</text>
</div>
<!--describe判斷是switch按鈕還是圖標-->
<div class="list-des"
if="{{ subheading }}">
<text class="list">
<span>{{ subheading }}</span>
</text>
</div>
</div>
<!--switch開關-->
<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;
}
/*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代碼:
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代碼:
<!--標題1的彈窗-->
<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 {
/**
* 標題1彈窗開啟
*/
showDialog() {
this.$element('dataRoamDialog').show();
},
/**
* 標題1彈窗取消
*/
setList() {
this.$element('dataRoamDialog').close();
},
}
效果圖：
總結
以上是所有的代碼，寫這個不難。主要用到了數據綁定跟三元運算和彈窗組件。相當于學習了鴻蒙的開發，自己嘗試封裝，讓自己更加了解鴻蒙開發。本次分享希望對大家的學習有所幫助。
