当前位置: 首页 > 科技观察

鸿蒙js开发7鸿蒙分组列表及弹出Menu菜单

时间:2023-03-22 15:42:47 科技观察

更多信息请访问:Harmonyos.51cto.com/#zz,与华为官网合作打造的鸿蒙技术社区。星光不问路人,时光不负有心人。1.鸿蒙视图效果点击菜单项、跳转页面、底部菜单栏和轮播布局及轮播图2.js业务数据和事件importpromptfrom'@system.prompt';importrouterfrom'@system.router';exportdefault{data:{title:'World',fundatas:[{"fathermenu":"员工管理","childmenu":[{"icon":"/common/emp.png","text":"查询员工"},{"icon":"/common/emp.png","text":"添加员工"},{"icon":"/common/emp.png","text":"删除员工"},{"icon":"/common/emp.png","text":"更新员工"}]},{"fathermenu":"客户服务","childmenu":[{"icon":"/common/customer.png","text":"一卡换行"},{"icon":"/common/customer.png","text":"银联服务"},{"icon":"/common/customer.png","文&曲ot;:"账单业务"}]},{"fathermenu":"内部管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},{"fathermenu":"合同管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},{"fathermenu":"资产管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},{"fathermenu":"绩效管理","childmenu":[{"icon":"","text":""},{"icon":"","text":""},{"icon":"","text":""}]},]},clickitem(itemvalue){if(itemvalue=="查询员工"){this.$element("menu").show({x:360,y:120});//this.$element("menu").show();}prompt.showToast({message:"clickedthemenu"+itemvalue})},menuSelected(e){prompt.showToast({message:"您选择查询的值为:"+e.value})router.push({uri:"pages/index/index"})}}3.页面查看代码{{$item.fathermenu}}{{value.text}}男员工女员工

4.样式code.container{width:100%;height:1200px;}.listview{width:100%;height:100%;}.groupview{width:100%;height:46%;border-bottom:5pxsolid#DCDCDC;}.listitem{width:100%;height:20%;display:flex;justify-content:space-around;}.listitemone{width:50%;height:6%;border-bottom:1pxsolid#DCDCDC;display:flex;justify-content:space-around;}.cimg{width:40px;height:40px;}.tv1{font-size:35px;font-weight:bold;font-family:sans-serif;letter-spacing:10px;}.tv2{font-size:34px;font-weight:bold;font-family:sans-serif;}5.跳转到页面后的视图层
1.鸿蒙2.苹果3.安卓{{$item.title}}{{$item.date}}推荐视频本地内容{{weatherInfo.city}}{{winfo.info}}{{winfo.direct}}{{winfo.power}}第第二个第三个第四个第四幅{{$item.menu}}6.js业务逻辑部分importfetchfrom'@system.fetch';exportdefault{data:{weatherInfo:{},winfo:{},nextInfo:[],currentdata:0,title:"",menus:[{menu:"Homepage","path":"./common/ones.png","path1":"./common/oneu.png"},{menu:"category","path":"./common/cs.png","path1":"./common/cu.png"},{menu:"Content","path":"./common/cons.png","path1":"./common/conu.png"},{menu:"My","path":"./common/mys.png","path1":"./common/myu.png"}],todolist:[{title:'刷Leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'浏览leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'看leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'浏览leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'读leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'阅读leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'读leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'阅读leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'读leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',},{title:'阅读leetcode',date:'2020-06-2510:00:00',},{title:'看我ovie',date:'2020-06-2720:00:00',},{title:'读leetcode',date:'2020-06-2510:00:00',},{title:'看电影',日期:'2020-06-2720:00:00',},{标题:'刷leetcode',date:'2020-06-2510:00:00',},{title:'看电影',date:'2020-06-2720:00:00',}]},onInit(){//this.title=this.$t('strings.world');letthat=this;fetch.fetch({url:"http://apis.juhe.cn/simpleWeather/query?city=南京&key=3dc98f3428c44424088015738a070554",responseType:"json",success:function(resp){letcurrentValue=JSON.parse(resp.data);that.weatherInfo=currentValue.result;that.winfo=currentValue.result.realtime;//that.nextInfo=currentValue.future;}})},changemenu(index){this.currentdata=index;this.$element('swiper').swipeTo({index:index});}}7.样式代码.pageview{width:100%;height:1600px;background-color:azure;}.bottommenu{width:100%;height:140px;background-color:snow;border-top:10pxsolidblack;z-index:999;position:fixed;left:0px;bottom:0px;display:flex;justify-content:center;align-items:center;}.menubox{width:22%;height:90%;/**border:9pxsolid#ccff6a;**/margin-left:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;}.menutitle{color:black;font-weight:bold;letter-spacing:4px;}.cimg{width:40px;height:40px;}.swiperview{width:100%;height:100%;}.sw1{width:100%;height:100%;display:flex;flex-direction:column;}.sw2{width:100%;height:100%;background-color:cornflowerblue;}.sw3{width:100%;高度:100%;背景颜色:#ccff6a;}.sw4{宽度:100%;高度:100%;背景颜色:#009865;}.swiper1{宽度:100%;高度:330px;边框:1pxsolid#000000;指标颜色:#cf2411;指标大小:14px;指标底部:20px;指标右侧:30px;边距顶部:100px;}.swiperContent1{宽度:800px;高度:100%;调整内容:center;}.button{width:70%;margin:10px;}.text{font-size:40px;}.swiper2{width:100%;height:100px;background-color:powderblue;}.lineview{width:100%;height:100%;}.todo-wraper{width:100%;height:100%;}.todo-item{width:100%;height:80px;flex-direction:row;display:flex;}.todo-title{width:454px;height:40px;text-align:center;}.tabs{width:100%;}.tab-bar{margin:10px;height:60px;border-color:#007dff;border-width:1px;}.tab-text{width:300px;text-align:center;}.tabcontent{width:100%;height:80%;justify-content:center;}.item-content{height:100%;justify-content:center;display:flex;flex-direction:column;}.item-title{font-size:60px;}.currentview{width:100%;height:30%;border-bottom:4pxsolidperu;display:flex;}.nextview{width:100%;height:70%;}.leftview{width:30%;height:100%;border-right:2pxsolidpaleturquoise;border-bottom:2pxsolidpaleturquoise;display:flex;justify-content:center;align-items:center;}.rightview1{width:70%;height:100%;display:flex;flex-direction:column;}.infot1{font-family:italics;font-size:80px;color:snow;font-weight:bold;letter-spacing:5px;}.cell{width:100%;height:30%;border:1pxsolidred;}?版权归作者及鸿蒙技术社区所有,如需转载请注明出处,否则追究责任。更多信息请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz