HarmonyOS自定义列表组件

时间：2023-03-23 10:43:58 科技观察

更多内容请访问：OpenHarmony技术社区https://ost.51cto.com前言根据Harmony官网组件，结合相关技术，尝试对列表组件进行封装，提高效率的发展。效果展示实现步骤封装组件代码：hml代码：

css代码:.container{justify-content:center;对齐项目：居中；左填充：48px；填充右：35px；overscroll-effect:spring;}.background:active{background-color:#f6f6f6;}.underline{border-bottom:1pxsolid#ccc;}/*标题样式代码*/.list-left{flex:1;弹性方向：列；证明内容：居中；}.title{字体系列：FZLTHJW--GB1-0;字体大小：32px；颜色：rgba(0,0,0,0.9);字母间距：0；字体粗细：400；高度：70px;}.list-des{宽度：530px;弹性包装：包装；margin-bottom:10px;}.list{font-family:HarmonyOS_Sans;字体大小：28px；颜色：rgba(0,0,0,0.6);字母间距：0；行高：35px；字体粗细：400；填充底部：2px;}/*切换样式代码*/.list-right{justify-content:flex-end;宽度：115px；最小高度：100px；对齐项目：中心；}。切换列表{宽度：115px；高度：120px；}.list-icon{宽度：14px；高度：26px；right:20px;}jscode:exportdefault{props:{//databindingtitle:{default:''},//databindingsubheading:{default:''},//true是一个开关，false是一个iconwhether:{default:true,type:Boolean},//判断是否为switch开关列表，如果不是，则添加点击阴影事件start:{default:true,type:Boolean},},computed:{//判断是否为switch开关列表，如果不是，则添加点击阴影事件.$emit('switchHandle',checkedValue);this.checkStatus=checkedValue;},};引入组件代码实现列表功能：hml代码：

csscode:.container{flex-direction:column;颜色：#fff；背景色：#fff；overscroll-effect:spring;}效果图为：给标题1添加弹窗：Hml代码：

弹窗内容弹窗

csscode:/*pop-upstyle*/.dialog-main{width:95%;}.dialog-div{flex-direction:column;对齐项目：弹性启动；}。漫游{height:340px;}.text{font-family:HarmonyOS_Sans_Medium;字体大小：36px；颜色：rgba(0,0,0,0.9);字母间距：0；行高：38px；字体粗细：粗体；高度：112px；填充：40px0040px;}.inner-txt{宽度：90%;}.txt{字体系列：HarmonyOS_Sans；字体大小：32px；颜色：rgba(0,0,0,0.9);字母间距：0；行高：38px；字体粗细：400；弹性：1；高度：75px；证明内容：空格之间；font-family:PingFangSC-Regular;}.distance{padding-left:40px;margin-top:20px;.inner-btn{width:100%;高度：120px；行高：80px；证明内容：居中；对齐项目：居中；边距：10px20px020px;}.btn-txt{宽度：230px;高度：80px；字体大小：32px；文字颜色：#1e90ff；背景色：#fff；文本对齐：左；对齐项目：居中；弹性：1；文本对齐：居中；}.btn-l{宽度：2px；高度：50px；背景色：#ccc；margin:010px;}js代码:exportdefault{/***标题1弹窗开启*/showDialog(){this.$element('dataRoamDialog').show();},/***标题1弹窗删除*/setList(){this.$element('dataRoamDialog').close();},}效果图：综上，以上就是全部代码。这个写起来并不难，主要是用到数据绑定，三元运算和弹窗组件。相当于学习了鸿蒙的开发，试着自己封装一下，这样才能更好的理解鸿蒙的开发。本次分享希望对大家的学习有所帮助。更多信息请访问：OpenHarmony技术社区https://ost.51cto.com

上一篇：带你三分钟看懂Web开发

下一篇：微软正在开发更先进的网络应用程序，与PWA兼容

HarmonyOS自定义列表组件相关文章