HarmonyOS自定义列表组件封装
根据openharmony官网组件，结合相关技术，尝试列表组件的封装，提高开发的效率。
效果展示：
实现步骤
①封装组件代码
hml 代码： {{ title }}
{{ subheading }}
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 代码：
css 代码：
.container { flex-direction: column; color: #fff; background-color: #fff; overscroll-effect: spring;}
效果图为：
③在标题 1 加弹窗 hml 代码：
什么弹窗 弹窗
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(); },}
效果图：
总结
以上是所有的代码，写这个不难。主要用到了数据绑定跟三元运算和弹窗组件。相当于学习了openharmony的开发，自己尝试封装，让自己更加了解openharmony开发。欢迎各位开发者一起讨论与研究，本次分享希望对大家的学习有所帮助。
如何选择液压泵及原则介绍
三星拆除LCD生产线加造OLED屏幕只因需求量太大
45个寄存器、CPU核心技术大揭秘（上）
展现最新科技成果,打造领先行业标杆:三星多款显示器亮相2023进博会
DC/DC 升压模式转换器LT3598
HarmonyOS自定义列表组件封装
施耐德大功率变频器电路分析_施耐德变频维修
Xilinx 宣布加入 Open RAN 政策联盟
PLC控制系统设计：信号灯控制系统—以转换为中心的编程方式梯形图举例
WIFI无线网络的拓扑结构和应用场景
第三届联合国教科文组织创意城市北京峰会开幕
线路板词汇中英文对照表
【工程师开发板使用测评】爱普特 APT32F110 ev board 试用测评连载02
MAX8510/MAX8511/MAX8512超低噪声、低压差(LDO)线性稳压器
谷歌将华为Mate 20 Pro从Android Q名单中悄然移除
八大点浅析电动汽车造型设计
A/D转换器的作用是什么？
远程办公需求突发，升级千兆宽带套餐正当时
TDK推出面向工业应用的紧凑型低功耗运动感应传感器详细分析
人工智能助力抗疫的背后秘密是什么
效果展示：
实现步骤
①封装组件代码
hml 代码： {{ title }}
{{ subheading }}
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 代码：
css 代码：
.container { flex-direction: column; color: #fff; background-color: #fff; overscroll-effect: spring;}
效果图为：
③在标题 1 加弹窗 hml 代码：
什么弹窗 弹窗
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(); },}
效果图：
总结
以上是所有的代码，写这个不难。主要用到了数据绑定跟三元运算和弹窗组件。相当于学习了openharmony的开发，自己尝试封装，让自己更加了解openharmony开发。欢迎各位开发者一起讨论与研究，本次分享希望对大家的学习有所帮助。
如何选择液压泵及原则介绍
三星拆除LCD生产线加造OLED屏幕只因需求量太大
45个寄存器、CPU核心技术大揭秘（上）
展现最新科技成果,打造领先行业标杆:三星多款显示器亮相2023进博会
DC/DC 升压模式转换器LT3598
HarmonyOS自定义列表组件封装
施耐德大功率变频器电路分析_施耐德变频维修
Xilinx 宣布加入 Open RAN 政策联盟
PLC控制系统设计：信号灯控制系统—以转换为中心的编程方式梯形图举例
WIFI无线网络的拓扑结构和应用场景
第三届联合国教科文组织创意城市北京峰会开幕
线路板词汇中英文对照表
【工程师开发板使用测评】爱普特 APT32F110 ev board 试用测评连载02
MAX8510/MAX8511/MAX8512超低噪声、低压差(LDO)线性稳压器
谷歌将华为Mate 20 Pro从Android Q名单中悄然移除
八大点浅析电动汽车造型设计
A/D转换器的作用是什么？
远程办公需求突发，升级千兆宽带套餐正当时
TDK推出面向工业应用的紧凑型低功耗运动感应传感器详细分析
人工智能助力抗疫的背后秘密是什么