鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?【课程入口】

目录:
1.鸿蒙视图效果
2.js业务数据和事件
3.页面视图代码
4.跳转页面后的视图层
5.js业务逻辑部分
6.《鸿蒙js开发》系列文章合集

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

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.页面视图代码

<div class="container">

    <list  class="listview">
<block for="{{fundatas}}">
<list-item-group class="groupview">
<list-item class="listitem">
<text class="tv1">{{$item.fathermenu}}</text>
</list-item>
<block for="{{ (index,value) in $item.childmenu}}">
<list-item class="listitemone" onclick="clickitem({{value.text}})">
<image class="cimg" src="{{value.icon}}"></image>
<text class="tv2">{{value.text}}</text>
</list-item>
</block>
</list-item-group> </block> </list> <menu id="menu" title="员工性别" onselected="menuSelected">
<option value="男性员工">
男性员工
</option>
<option value="女性员工">
女性员工
</option> </menu>
</div>

3.样式代码

.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;
}

4.跳转页面后的视图层

<div  class="pageview">
<swiper class="swiperview" id="swiper" index="0" >
<div class ="sw1">
<swiper class="swiper1" id="swiper1" autoplay="true" index="0" indicator="true" loop="true" digital="false">
<div class = "swiperContent1" >
<text class = "text" value="轮播图1"></text>
</div>
<div class = "swiperContent1">
<text class = "text" value="轮播图2"></text>
</div>
<div class = "swiperContent1">
<text class = "text" value="轮播图3"></text>
</div>
</swiper> <swiper class="swiper2" loop="true" vertical="true" indicator="false" autoplay="true">
<div class="lineview">
<text>1.鸿蒙</text>
</div>
<div class="lineview">
<text>2.苹果</text>
</div>
<div class="lineview">
<text>3.安卓</text>
</div>
</swiper>
</div> <div class ="sw2">
<list class="todo-wraper">
<list-item for="{{todolist}}" class="todo-item">
<text class="todo-title">{{$item.title}}</text>
<text class="todo-title">{{$item.date}}</text>
</list-item>
</list>
</div>
<div class ="sw3">
<tabs class = "tabs" index="0" vertical="false" onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">推荐</text>
<text class="tab-text">视频</text>
<text class="tab-text">本地</text>
<text class="tab-text">内容</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<div class="currentview">
<div class="leftview"><text class="infot1">{{weatherInfo.city}}</text></div>
<div class="rightview1">
<div class="cell"><text>{{winfo.info}}</text></div>
<div class="cell"><text>{{winfo.direct}}</text></div>
<div class="cell"><text>{{winfo.power}}</text></div>
</div> </div>
<div class="nextview"> </div> </div>
<div class="item-content" >
<text class="item-title">第二个</text>
</div>
<div class="item-content" >
<text class="item-title">第三个</text>
</div>
<div class="item-content" >
<text class="item-title">第四个</text>
</div>
</tab-content>
</tabs>
</div> <div class ="sw4">
<text>第四幅</text>
</div> </swiper>
<div class="bottommenu">
<div for="{{menus}}" class="menubox" onclick="changemenu({{$idx}})">
<image src="{{currentdata==$idx?$item.path:$item.path1}}" class="cimg"></image>
<text class="menutitle">{{$item.menu}}</text>
</div>
</div>
</div>

5.js业务逻辑部分

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}); }
}

5.样式代码

.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: 2px solid paleturquoise;
border-bottom: 2px solid paleturquoise;
display: flex;
justify-content: center;
align-items: center;
}
.rightview1{
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
}
.infot1{
font-family: 楷体;
font-size: 80px;
color: snow;
font-weight: bold;
letter-spacing: 5px;
}
.cell{
width: 100%;
height: 30%;
border:1px solid red;
}

作者:六合李欣

想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

鸿蒙js开发7 鸿蒙分组列表和弹出menu菜单的更多相关文章

  1. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  2. EBS OAF开发中实现參数式弹出窗体

    EBS OAF开发中实现參数式弹出窗体 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 概览 參数式弹出窗体和嵌入式弹出窗体不一样,它拥有独立 ...

  3. [Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决的方法

    Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完毕后才会隐藏(display:none). 有些奇葩手机 ...

  4. Android点击列表后弹出输入框,所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  5. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  6. JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  7. JS中通过LayUI的layer.prompt弹出文本输入层,多个按钮回调获取输入值

    JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:用于要弹出信息的按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. js版iphone通讯录分组列表效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  10. js点击某个图标或按钮弹出文件选择框

    <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2. ...

随机推荐

  1. 【转】Oracle执行计划解释

    Oracle执行计划解释 一.相关的概念     Rowid的概念:rowid是一个伪列,既然是伪列,那么这个列就不是用户定义,而是系统自己给加上的. 对每个表都有一个rowid的伪列,但是表中并不物 ...

  2. Apache RewriteRule

    1.Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基 于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果要想用到rewrite模块 ...

  3. linux文件描述符open file descriptors与open files的区别

    一个文件被打开,也可能没有文件描述符,比如current working diretories,memory mapped files and executable text files ;losf可 ...

  4. POJ1285 Combinations, Once Again(背包 排列组合)

    背包解组合数学问题,n种物品,每种num[i]个,求取r个的方法数. 背包思想,f[j]表示当前取j个数的方法数,则状态转移方程为 f[j] += f[k](max(j - num[i], 0) &l ...

  5. 6. 星际争霸之php设计模式--建造器模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  6. 【学习总结】iOS中NSNotification、delegate、KVO三者之间的区别与联系?

    在开发ios应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,controllers间怎么进行通信.在IOS应用不断的出现三种模式来实现这种通信: 1.委托delegation: 2.通 ...

  7. JSP之初识

    JSP是“java server pages”的缩写,java是一种编程语言,jsp只是相当于java里面的servlet部分,所以JSP技术是以Java语言作为脚本语言的. JSP这门技术的最大的特 ...

  8. document.domain - JavaScript的同源策略问题:错误信息:Permission denied to access property 'document'_eecc00_百度空间

    document.domain - JavaScript的同源策略问题:错误信息:Permission denied to access property 'document'_eecc00_百度空间 ...

  9. cap deploy:setup报错

    今天部署cap的时候,setup出现以下错误: 查询半天未果,不过最后还是在google找到了,可见度娘极为不靠谱! I had the same error on deploy:setup with ...

  10. SRM483

    250pt 题意:给定一个[0,1)间的实数,一个分母不超过maxDen的分数逼近.. 思路:直接枚举.然后判断. code: #line 7 "BestApproximationDiv1. ...