提示框，对话框，路由跳转页面，跑马灯，幻灯片及list组件的应用

目录：

主页面的js业务逻辑层

主页面视图层

主页面css属性设置

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

跳转页面一的视图层

跳转页面二的视图层

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

跳转页面三的视图层

跳转页面三的css属性设置

效果图

视频

幻灯片控件:

跑马灯控件:

弹出提示框: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‘
});
}
}
}

主页面视图层:

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:"你点击了否按钮"
})
}
}
})
}
}

 

跳转页面一的视图层:

class="container">
<button Onclick="changmes">太和殿button>
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‘
})
}
}


 

 

跳转页面三的视图层:

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

• android
• asp.net
• ios
• php
• jsp
• 数据库
• list
• js
• css

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

• int

  求解hdu 1003 java题目的动态规划优化方法

  本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

  蜡笔小新   2023-12-14 13:11:00
• int

  OC学习笔记之@property和@synthesize

  本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

  蜡笔小新   2023-12-14 12:05:06
• js

  Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

  

  本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

  蜡笔小新   2023-12-14 12:01:13
• function

  基于layUI的图片上传前预览功能的2种实现方式

  

  本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

  蜡笔小新   2023-12-14 17:06:58
• int

  Java实现大数乘法（分治算法）

  本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

  蜡笔小新   2023-12-14 15:43:50
• int

  HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

  

  本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

  蜡笔小新   2023-12-14 15:08:18
• js

  Alink回归预测的不完善问题及期待

  本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

  蜡笔小新   2023-12-14 14:25:33
• js

  测试人的性格，点火让他着急，考验婚姻问题的善意玩人

  本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

  蜡笔小新   2023-12-14 09:10:09
• int

  Linux进程控制块PCBtask_struct结构体结构及作用详解

  本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

  蜡笔小新   2023-12-13 21:31:18
• int

  java 线程死锁模拟

  1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

  蜡笔小新   2023-12-13 19:12:25
• int

  《数据结构》学习笔记3——串匹配算法性能评估

  

  本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

  蜡笔小新   2023-12-13 16:16:05
• int

  动态规划算法的基本步骤及最长递增子序列问题详解

  

  本文详细介绍了动态规划算法的基本步骤，包括划分阶段、选择状态、决策和状态转移方程，并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中，在以后尽可能多地利用这些子问题的解，从而提高算法的效率。 ... [详细]

  蜡笔小新   2023-12-13 15:38:19
• js

  Java验证码——kaptcha的使用配置及样式

  

  本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

  蜡笔小新   2023-12-13 13:58:25
• int

  高质量SQL书写的30条建议

  

  本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

  蜡笔小新   2023-12-13 13:24:33
• js

  工程中添加Android Dependencies

  在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]

  蜡笔小新   2023-12-13 12:08:09

我怎么了2602902235

这个家伙很懒，什么也没留下！

Tags | 热门标签

• io
• jsp
• usb
• httprequest
• scala
• cmd
• case
• yaml
• callback
• md5
• post
• config
• text
• include
• ip
• range
• frameworks
• hashset
• python3
• runtime
• php7
• js
• solr
• php5
• hashtable
• function
• c语言
• ascii
• int
• replace

RankList | 热门文章

• 1CentOS安装jdk的三种方法
• 2Spring AOP的几种实现方式总结
• 3Java Resource路径整理总结
• 4Java内存区域与内存溢出异常详解
• 5深度剖析java中JDK动态代理机制
• 6spring之Bean的生命周期详解
• 7Java网络通信基础编程(必看篇)
• 8Spring Cloud实战技巧之使用随机端口
• 9详谈Java中的Object、T(泛型)、?区别
• 10How to edit/update default Get Sources step in build task TFS?
• 11从不同目录编译同一c程序会生成不同大小的目标代码
• 12Spring学习之依赖注入的方法（三种）
• 13浅谈Action+Service +Dao 功能
• 14解决java编译错误（ 程序包javax.servlet不存在javax.servlet.*）
• 15java JSP开发之Spring中Bean的使用

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有