目录:

主页面的js业务逻辑层

主页面视图层

主页面css属性设置

跳转页面一的js业务逻辑层

跳转页面一的视图层

跳转页面二的视图层

跳转页面三的js业务逻辑层

跳转页面三的视图层

跳转页面三的css属性设置

效果图

视频

幻灯片控件:<image-animator></image-animator>

跑马灯控件:<marquee></marquee>

弹出提示框:prompt.showToast()

弹出对话框:prompt.showDialog()

在制作提示框的时候,首先制作一个菜单栏选项,弹出菜单栏仅有当调试点击后才触发显示出来 不占用原有视图空间.弹出菜单栏的位置默认以(0,0)为基准点,为了更好的用户体验,也可以自行设置弹出位置(如下图)

介绍一种跳转页面新方法:路由跳转页面(具体见代码):  import router from '@system.router';                         //通过路由跳转页面

router.push({   uri: 'pages/jumpone/jumpone'})                //路由的方法

主页面的js业务逻辑层:

import prompt from '@system.prompt';
import router from '@system.router'; //路由 通过路由跳转页面
export default {
data: {
title: 'World',
imgdatas:[{
"src":"http://ttjib3.natappfree.cc/images/12.jpeg"
},
{
"src":"http://ttjib3.natappfree.cc/images/13.jpg"
},
{
"src":"http://ttjib3.natappfree.cc/images/14.jpg"
},
{
"src":"http://ttjib3.natappfree.cc/images/15.jpg"
},
{
"src":"http://ttjib3.natappfree.cc/images/16.png"
}]
},
showmenu() {
//弹出显示菜单 首先要获取这个组件用 this.$element //this.$element("menueone").show(); //弹出的具体位置 默认时以(0,0)为基准点
this.$element("menueone").show({
x:0,
y:0
});
},
changemenu(e) {
let name = e.value //这里的value就是hml中的value
//鸿蒙的提示框
prompt.showToast({
message:name
});
if (name == "太和殿")
{
router.push({ //路由的方法
uri: 'pages/jumpone/jumpone'
});
}
else if(name == "养心殿")
{
router.push({ //路由的方法
uri: 'pages/jumptwo/jumptwo'
});
}
else if(name == "乾清宫")
{
router.push({ //路由的方法
uri: 'pages/jumpthree/jumpthree'
});
}
} }

主页面视图层:

<div class="container">
<div class="topview">
<!--幻灯片组件-->
<image-animator class="image-animator" duration="5s" fixedsize="false" images="{{imgdatas}}">
</image-animator>
</div>
<div class="contentview">
<button onclick="showmenu">菜单</button>
</div>
<menu id="menueone" onselected="changemenu">
<option value="太和殿">太和殿</option>
<option value="养心殿">养心殿</option>
<option value="乾清宫">乾清宫</option>
</menu>
</div>

主页面css属性设置:

.container {

    width:100%;
height: 1200px;
display: flex;
flex-direction: column;
background-color: skyblue;
}
.topview{
width: 100%;
height: 30%;
border-bottom: 1px solid blue;
}
.image-animator{
width: 100%;
height: 100%;
}
.contentview{
width: 100%;
height: 10%;
background-color: white;
}

跳转页面一的js业务逻辑层:

import prompt from '@system.prompt';

export default {
data: {
title: 'World'
},
changmes() {
//1.弹出提示框
// prompt.showToast()
//2.弹出对话框
prompt.showDialog({
title:"问题",
message:"你今年是否有600岁?",
buttons:[{"text":"是","color":"#000000"},{"text":"否","color":"#000000"}],
//用successs追踪对话框
success:function(data){
if(data.index==0){
prompt.showToast({
message:"你点击了是按钮"
})
}
if(data.index==1){
prompt.showToast({
message:"你点击了否按钮"
})
}
}
})
}
}

跳转页面一的视图层:

<div class="container">
<button onclick="changmes">太和殿</button>
</div>

跳转页面二的视图层:

<div class="container">
<marquee>
最是一年春好处,绝胜烟柳满皇都
</marquee>
</div>

跳转页面三的js业务逻辑层:

import router from '@system.router';
export default {
data: {
title: 'World',
listdatas:[{"cname":"故宫典藏","cimg":"/common/gugong.png","lname":[{"fname":"宫廷人物","icon":"/common/renwu.png"},{"fname":"宫廷典制","icon":"/common/gugong.png"},{"fname":"宫廷文创","icon":"/common/gongwenhua.png"},{"fname":"宫廷建筑","icon":"/common/gu.png"}]},
{"cname":"故宫文创","cimg":"/common/gugong.png","lname":[]},
{"cname":"故宫建筑","cimg":"/common/gugong.png","lname":[]},
{"cname":"故宫历史","cimg":"/common/gugong.png","lname":[]}
]
},
changemenu(e){
router.push({
uri:'pages/gugongwenchuang/gugongwenchuang'
})
}
}

跳转页面三的视图层:

<div class="container">
<list class="listview">
<block for="{{listdatas}}">
<list-item-group class="group"> <!--高度不需要给出 会自适应大小-->
<list-item class="listitem">
<image class="img1" src="{{$item.cimg}}"></image>
<text class="txt1">{{$item.cname}}</text>
</list-item>
<block for="{{(cindx,cvalue) in $item.lname}}">
<list-item class="listitem1" onclick="changemenu">
<image class="img1" src="{{cvalue.icon}}"></image>
<text class="txt2">{{cvalue.fname}}</text>
</list-item>
</block>
</list-item-group>
</block>
</list>
</div>

跳转页面三的css属性设置:

.container {
width: 100%;
height: 1200px;
display: flex;
flex-direction: column;
background-color: skyblue;
}
.listview{
width: 100%;
height: 100%;
}
.group{
width: 100%;
}
.listitem{
width: 100%;
height: 25%;
display: flex;
justify-content:center;
align-items: center;
}
.img1{
width: 80px;
height: 80px;
}
.txt1{
font-size: 45px;
font-weight: bold;
font-family: sans-serif;
margin-left: 70px;
}
.txt2{
font-size: 35px; font-family: sans-serif;
margin-left: 70px;
}
.listitem1{
width: 100%;
height: 18%;
display: flex;
justify-content:center;
align-items: center;
}

效果图如下,效果视频已上传专栏(HarmonyOS开发从0到1)             https://harmonyos.51cto.com/column/35

作者:noutsider

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

提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用的更多相关文章

  1. Extjs6(四)——侧边栏导航根据路由跳转页面

    本文基于ext-6.0.0 之前做的时候这个侧边栏导航是通过tab切换来切换页面的,但是总感觉不太对劲,现在终于发现怎么通过路由跳转了,分享给大家,可能有些不完善的地方,望大家读后可以给些指点.欢迎留 ...

  2. 从service弹出系统级自定义提示框,可在任意页面弹出

    添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> // 显示 ...

  3. javascript;先弹出提示框,再跳转到其他页面。

    context.Response.Write("<script>alert('删除成功!" + r.ToString() + "条');window.loca ...

  4. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

  5. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  6. 如何在 messager/alert/confirm等消息提示框中 获取 / 设置 嵌入 html内容中的 input[type=checkbox]等的选中状态?

    总结, 有3点: 不能/不要 在 这些消息框 / 提示框/ 对话框中的 回调函数中去写代码: 获取嵌入 内容中input.checkbox的选中状态, 因为 虽然在这些框存在的时候, 这个 check ...

  7. WKWebView不显示提示框(Swift)

    使用WKWebView的时候会出现明明自己做的一些页面有提示框, 为什么使用别人的页面提示框总是不显示, 其实很大部分原因是因为该提示框是通过JS调用的, 需要实现WKUIDelegate来进行监听 ...

  8. jQuery EasyUI 教程-Tooltip(提示框)

    <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...

  9. Ionic5路由跳转传值复用

    1. 路由技术 ( 详细记录 ) 是笔记不是博文,觉得写的不够详细的可以使用Ctrl + W组合键 路由跳转页面 1. HTML 中使用 routerLink 属性路由进行跳转,传值时使用 query ...

随机推荐

  1. 使用gitlab-runner本地验证.gitlab-ci.yml

    背景 在gitlab上配置新项目的CI的时候,需要编写项目的 .gitlab-ci.yml 文件. 每次修改 .gitlab-ci.yml 文件之后都要执行git push让GitLab去构建来验证当 ...

  2. .NET生态系统掠影

    如果你是一名开发人员,想要进入到.NET的世界,你需要知道都有哪些可能.由于.NET Framework是..NET生态系统中最流行的技术,你可以用它来构建各种各样的应用程序,但是最近,出现了一些新的 ...

  3. linux下使用vsftp搭建FTP服务器:匿名登录,账号登录,SSL加密传输

    目录 一.关于FTP和VSFTP 二.ftp.sftp.vsftp.vsftpd的区别 三.项目一:搭建一台所有人都可以访问的通用FTP服务器 3.1 项目要求 3.2 项目思路分析 3.3 使用vs ...

  4. Python实现全自动购买火车票!抢票回家过年咯

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理这个是实现结果,因为一天只能取消三次,所以最后一步点击确认被我注释了1.首先实现使用selenium登 ...

  5. python绘制美丽花朵

    from mpl_toolkits.mplot3d import Axes3D from matplotlib import cm from matplotlib.ticker import Line ...

  6. inotifywait命令如何监控文件变化?

    转载自:https://segmentfault.com/a/1190000038351925 文件监控可以配合rsync实现文件自动同步,例如监听某个目录,当文件变化时,使用rsync命令将变化的文 ...

  7. VS中使用RDLC提示类型不一致

    问题描述 错误"基类包括字段"XXXXXXX",但其类型(Microsoft.Reporting.WebForms.ReportViewer)与控件(Microsoft. ...

  8. CentOS7 实战源码部署nginx网站服务器

    简介:实战演练nginx网站服务器的搭建 nginx 简介: Nginx是一款高性能的 HTTP 和反向代理服务器   Nginx的优点: 1.高并发量:根据官方给出的数据,能够支持高达 50,000 ...

  9. Oracle创建表空间创建用户授权

    注意:SYS用户下执行.sys登录必须为sysdba身份.查看数据文件存放位置. select * from dba_data_files; 1.创建表空间 CREATE TABLESPACE tp_ ...

  10. Linux top命令在生产环境的妙用

    top linux下的任务管理器 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.top是一个动态显示过程,即可以通过用户按键来 ...