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

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

任正非：现在华为必须全面靠自己打造产品，要敢于将鸿蒙推入竞争，星光不问赶路人,时光不负有心人。

1.鸿蒙视图效果

点击menu菜单一项，跳转页面，底部菜单栏和轮播布局和轮播图

2.js业务数据和事件

 
 
 
 
  
  
  
  import prompt from '@system.prompt';
  
  
  
  import router from '@system.router';
  
  
  
  export default {
  
  
  
      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","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":""}]},
  
  
  
                    {"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:"点击了菜单"+itemvalue
  
  
  
  
  
  
  
          })
  
  
  
      },
  
  
  
      menuSelected(e) {
  
  
  
          prompt.showToast({
  
  
  
              message:"你选择查询的值是:"+e.value
  
  
  
          })
  
  
  
  
  
  
  
          router.push({
  
  
  
              uri:"pages/index/index"
  
  
  
  
  
  
  
          })
  
  
  
  
  
  
  
  
  
  
  
      }
  
  
  
  }

3.页面视图代码

  
 
 
 
   
  
  
  
   
  
  
      
   
  
  
      
   
  
  
         
   
  
  
             
   
  
  
                 
   
  
  
                     {{$item.fathermenu}}
   
  
  
                 
   
  
  
                 
   
  
  
                   
   
  
  
                      
   
  
  
                      {{value.text}}
   
  
  
                   
   
  
  
                 
   
  
  
             
   
  
  
         
   
  
  
         
   
  
  
      
   
  
  
      
   
  
  
      
   
  
  
  
   
  
  
  
   
  
  
      
   
  
  
          
   
  
  
              男性员工
   
  
  
          
   
  
  
          
   
  
  
              女性员工

4.样式代码

 
 
 
 
  
  
  
  .container {
  
  
  
      width: 100%;
  
  
  
      height: 1200px;
  
  
  
  }
  
  
  
  .listview{
  
  
  
      width: 100%;
  
  
  
      height: 100%;
  
  
  
  }
  
  
  
  .groupview{
  
  
  
      width: 100%;
  
  
  
      height: 46%;
  
  
  
      border-bottom: 5px solid  #DCDCDC;
  
  
  
  }
  
  
  
  .listitem{
  
  
  
      width: 100%;
  
  
  
      height: 20%;
  
  
  
      display: flex;
  
  
  
      justify-content: space-around;
  
  
  
  }
  
  
  
  .listitemone {
  
  
  
      width: 50%;
  
  
  
      height: 6%;
  
  
  
      border-bottom: 1px  solid  #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.跳转页面后的视图层

import fetch from '@system.fetch';
export default {
data: {
weatherInfo:{},
winfo:{},
nextInfo:[],
currentdata:0,
title: "",
menus:[{menu:"首页","path":"./common/ones.png","path1":"./common/oneu.png"},
{menu:"分类","path":"./common/cs.png","path1":"./common/cu.png"},
{menu:"内容","path":"./common/cons.png","path1":"./common/conu.png"},
{menu:"我的","path":"./common/mys.png","path1":"./common/myu.png"}],
todolist: [{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},
{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},
{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},
{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},
{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
},{
title: '刷leetcode',
date: '2020-06-25 10:00:00',
}, {
title: '看电影',
date: '2020-06-27 20:00:00',
}
]
},
onInit() {
// this.title = this.$t('strings.world');
let that =this;
fetch.fetch({
url:"http://apis.juhe.cn/simpleWeather/query?city=南京&key=3dc98f3428c44424088015738a070554",
responseType:"json",
success:function(resp)
{
let currentValue=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});
}
}

.pageview{
width: 100%;
height: 1600px;
background-color: azure;
}
.bottommenu{
width: 100%;
height: 140px;
background-color: snow;
border-top: 10px solid black;
z-index:999;
position: fixed;
left: 0px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.menubox{
width: 22%;
height: 90%;
/**border:9px solid #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%;
height: 100%;
background-color: #ccff6a;
}
.sw4{
width: 100%;
height: 100%;
background-color: #009865;
}
.swiper1 {
width: 100%;
height: 330px;
border: 1px solid #000000;
indicator-color: #cf2411;
indicator-size: 14px;
indicator-bottom: 20px;
indicator-right: 30px;
margin-top: 100px;
}
.swiperContent1 {
width: 800px;
height: 100%;
justify-content: 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: 4px solid peru;
display: flex;
}
.nextview{
width: 100%;
height: 70%;
}
.leftview{
width: 30%;
height: 100%;
border-right
本文名称：鸿蒙js开发7鸿蒙分组列表和弹出Menu菜单
当前路径：http://www.shufengxianlan.com/qtweb/news5/465805.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联
猜你还喜欢下面的内容
网页设计公司知识
行业网站建设
和县翔豪网站　　　安卓开发　　　发光字制作　　　 app网站建设　　　成都包装盒设计　　　成都网站制作　　　宜宾网站建设　　　成都网站推广　　　微商城开发　　　软文平台　　　高端网站设计　　　成都网站制作　　　时嘉做网站　　　 IDC机房托管　　　香港云主机　　　四川中建建业　　　免备案虚拟主机　　　成都微信二次开发公司　　　郫县封阳台　　　软文发布平台　　　

高品质定制跨终端自动兼容节约开发成本开发周期短一体化服务

028-86922220 13518219792

028-86922220 13518219792
网站建设QQ：532337155 营销推广QQ：631063699 网站制作QQ：532337155 营销推广QQ：631063699 售后QQ：1683211881
创新互联建站专注：网站设计网站制作网站建设
地址：成都太升南路288号锦天国际A幢10楼

成都创新互联科技有限公司
Tel：400-028-6601（7x24h）