目录:

主页面的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业务逻辑层:

  1. import prompt from '@system.prompt';
  2. import router from '@system.router'; //路由 通过路由跳转页面
  3. export default {
  4. data: {
  5. title: 'World',
  6. imgdatas:[{
  7. "src":"http://ttjib3.natappfree.cc/images/12.jpeg"
  8. },
  9. {
  10. "src":"http://ttjib3.natappfree.cc/images/13.jpg"
  11. },
  12. {
  13. "src":"http://ttjib3.natappfree.cc/images/14.jpg"
  14. },
  15. {
  16. "src":"http://ttjib3.natappfree.cc/images/15.jpg"
  17. },
  18. {
  19. "src":"http://ttjib3.natappfree.cc/images/16.png"
  20. }]
  21. },
  22. showmenu() {
  23. //弹出显示菜单 首先要获取这个组件用 this.$element
  24. //this.$element("menueone").show();
  25. //弹出的具体位置 默认时以(0,0)为基准点
  26. this.$element("menueone").show({
  27. x:0,
  28. y:0
  29. });
  30. },
  31. changemenu(e) {
  32. let name = e.value //这里的value就是hml中的value
  33. //鸿蒙的提示框
  34. prompt.showToast({
  35. message:name
  36. });
  37. if (name == "太和殿")
  38. {
  39. router.push({ //路由的方法
  40. uri: 'pages/jumpone/jumpone'
  41. });
  42. }
  43. else if(name == "养心殿")
  44. {
  45. router.push({ //路由的方法
  46. uri: 'pages/jumptwo/jumptwo'
  47. });
  48. }
  49. else if(name == "乾清宫")
  50. {
  51. router.push({ //路由的方法
  52. uri: 'pages/jumpthree/jumpthree'
  53. });
  54. }
  55. }
  56. }

主页面视图层:

  1. <div class="container">
  2. <div class="topview">
  3. <!--幻灯片组件-->
  4. <image-animator class="image-animator" duration="5s" fixedsize="false" images="{{imgdatas}}">
  5. </image-animator>
  6. </div>
  7. <div class="contentview">
  8. <button onclick="showmenu">菜单</button>
  9. </div>
  10. <menu id="menueone" onselected="changemenu">
  11. <option value="太和殿">太和殿</option>
  12. <option value="养心殿">养心殿</option>
  13. <option value="乾清宫">乾清宫</option>
  14. </menu>
  15. </div>

主页面css属性设置:

  1. .container {
  2. width:100%;
  3. height: 1200px;
  4. display: flex;
  5. flex-direction: column;
  6. background-color: skyblue;
  7. }
  8. .topview{
  9. width: 100%;
  10. height: 30%;
  11. border-bottom: 1px solid blue;
  12. }
  13. .image-animator{
  14. width: 100%;
  15. height: 100%;
  16. }
  17. .contentview{
  18. width: 100%;
  19. height: 10%;
  20. background-color: white;
  21. }

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

  1. import prompt from '@system.prompt';
  2. export default {
  3. data: {
  4. title: 'World'
  5. },
  6. changmes() {
  7. //1.弹出提示框
  8. // prompt.showToast()
  9. //2.弹出对话框
  10. prompt.showDialog({
  11. title:"问题",
  12. message:"你今年是否有600岁?",
  13. buttons:[{"text":"是","color":"#000000"},{"text":"否","color":"#000000"}],
  14. //用successs追踪对话框
  15. success:function(data){
  16. if(data.index==0){
  17. prompt.showToast({
  18. message:"你点击了是按钮"
  19. })
  20. }
  21. if(data.index==1){
  22. prompt.showToast({
  23. message:"你点击了否按钮"
  24. })
  25. }
  26. }
  27. })
  28. }
  29. }

跳转页面一的视图层:

  1. <div class="container">
  2. <button onclick="changmes">太和殿</button>
  3. </div>

跳转页面二的视图层:

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

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

  1. import router from '@system.router';
  2. export default {
  3. data: {
  4. title: 'World',
  5. 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"}]},
  6. {"cname":"故宫文创","cimg":"/common/gugong.png","lname":[]},
  7. {"cname":"故宫建筑","cimg":"/common/gugong.png","lname":[]},
  8. {"cname":"故宫历史","cimg":"/common/gugong.png","lname":[]}
  9. ]
  10. },
  11. changemenu(e){
  12. router.push({
  13. uri:'pages/gugongwenchuang/gugongwenchuang'
  14. })
  15. }
  16. }

跳转页面三的视图层:

  1. <div class="container">
  2. <list class="listview">
  3. <block for="{{listdatas}}">
  4. <list-item-group class="group"> <!--高度不需要给出 会自适应大小-->
  5. <list-item class="listitem">
  6. <image class="img1" src="{{$item.cimg}}"></image>
  7. <text class="txt1">{{$item.cname}}</text>
  8. </list-item>
  9. <block for="{{(cindx,cvalue) in $item.lname}}">
  10. <list-item class="listitem1" onclick="changemenu">
  11. <image class="img1" src="{{cvalue.icon}}"></image>
  12. <text class="txt2">{{cvalue.fname}}</text>
  13. </list-item>
  14. </block>
  15. </list-item-group>
  16. </block>
  17. </list>
  18. </div>

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

  1. .container {
  2. width: 100%;
  3. height: 1200px;
  4. display: flex;
  5. flex-direction: column;
  6. background-color: skyblue;
  7. }
  8. .listview{
  9. width: 100%;
  10. height: 100%;
  11. }
  12. .group{
  13. width: 100%;
  14. }
  15. .listitem{
  16. width: 100%;
  17. height: 25%;
  18. display: flex;
  19. justify-content:center;
  20. align-items: center;
  21. }
  22. .img1{
  23. width: 80px;
  24. height: 80px;
  25. }
  26. .txt1{
  27. font-size: 45px;
  28. font-weight: bold;
  29. font-family: sans-serif;
  30. margin-left: 70px;
  31. }
  32. .txt2{
  33. font-size: 35px;
  34. font-family: sans-serif;
  35. margin-left: 70px;
  36. }
  37. .listitem1{
  38. width: 100%;
  39. height: 18%;
  40. display: flex;
  41. justify-content:center;
  42. align-items: center;
  43. }

效果图如下,效果视频已上传专栏(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. 第 16 章 【硬核!】 垃圾回收相关 GC细讲

    第 16 章 垃圾回收相关概念 1.System.gc() 的理解 1.1.System.gc() 方法 System.gc() 方法 在默认情况下,通过System.gc()者Runtime.get ...

  2. 聊两句XSS(跨站脚本攻击)

    XSS(跨站脚本攻击),聊两句,五毛的. XSS的危害: 窃取Cookie,盗用用户身份信息 这玩意儿是大多数XSS的目标,也好解决,可以先治个标,直接设置HttpOnly=true ,即不允许客户端 ...

  3. JIRA 知多少:聊一聊 Android Studio 、工作流相关设置

    Android Studio 相关 配置 JIRA 服务器 如果细心的话会发现有一个选项卡:Commit Message.这一段代码是不是有点熟悉呢?你没有猜错,这段代码就是 commit 模板,当你 ...

  4. 登录&单点登录介绍

    COOKIE & SESSION & TOKEN 主要用来跟踪会话,识别用户所用.cookie 是客户端,session 是服务端的. 因为 http 是无状态协议,每一次的访问都不知 ...

  5. java中将文件夹里面的文件复制到指定的文件夹(java IO)

    //现在制定路径下创建名称为左侧的文件夹 public class Copy { public static void main(String[] args) { //原始文件地址 File srcF ...

  6. 多线程那点事—Parallel.for

    先看段代码: 1 for (int i = 0; i < 10; i++) 2 { 3 Task.Factory.StartNew(()=>Console.WriteLine($" ...

  7. java interface和class中的协变

    协变 Java中的协变是指,当发生继承时,子类中重写父类的方法时,可以返回父类方法返回类型的子类型.比如: class SuperClass{} class SubClass extends Supe ...

  8. item系列魔法方法

    class Foo: def __init__(self, name): self.name = name def __getitem__(self, item): print('getitem执行' ...

  9. SparkSql自定义数据源之读取的实现

    一.sparksql读取数据源的过程 1.spark目前支持读取jdbc,hive,text,orc等类型的数据,如果要想支持hbase或者其他数据源,就必须自定义 2.读取过程 (1)sparksq ...

  10. LeetCode 面试题16.18.模式匹配

    模式匹配 题目: 你有两个字符串,即pattern和value. pattern字符串由字母"a"和"b"组成,用于描述字符串中的模式.例如,字符串" ...