-
添加容器
要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是div、list和tabs。
1.div组件：页面结构相对较简单时，由于div作为单纯的布局容器，可以直接多种子组件，所以可以直接用div作为容器使用。
2.list组件：当页面结构较为复杂时，可以利用list组件实现更流畅的操作。注意的是，list仅支持list-item作为子组件，使用实例：
<!-- xxx.hml -->
<list class="list">
<list-item type="listItem" for="{{textList}}">
<text class="desc-text">{{$item.value}}</text>
</list-item>
</list>// xxx.js
export default {
data: {
textList: [{value: '划水'},{value:'摸鱼'}],
},
}/* xxx.css */
.desc-text {
width:689px;
height:80px;
font-size:35px;
background-color:green;
}
3.tabs组件：当页面需要动态加载时推荐使用tabs组件。tabs组件仅支持一个tab-bar和一个tab-content，使用示例如下：
<!-- xxx.hml -->
<tabs>
<tab-bar>
<text>Hzw</text>
<text>Potter</text>
<text>Jay</text>
</tab-bar>
<tab-content>
<image src="{{hzwImage}}"></image>
<image src="{{potterImage}}"></image>
<image src="{{jayImage}}"></image>
</tab-content>
</tabs>// xxx.js
export default {
data: {
hzwImage:'common/hzw.png',
potterImage:'common/potter.png',
jayImage:'common/jay.png'
}
}
-
添加交互
运用div、text、image组件关联click事件构建点赞按钮
1.image组件用于显示未点赞和点赞的效果
2.text组件用于显示点赞数
实现实例如下：
<!--添加交互-->
<div>
<div class="like" onclick="lickClick">
<image class="like-img" src="{{likeImage}}" focusable="true"></image>
<text class="like-num" focusable="true"></text>
</div>
</div>
/* xxx.css */
.like {
width: 104px;
height: 54px;
border: 2px solid #bcbcbc;
justify-content: space-between;
align-items: center;
margin-left: 72px;
border-radius: 8px;
}
.like-img {
width: 33px;
height: 33px;
margin-left: 14px;
}
.like-num {
color: #bcbcbc;
font-size: 20px;
margin-right: 17px;
}// xxx.js
export default {
data: {
likeImage:'/common/unLike.png',
isPressed:false, //初始值为false
total:20,
},
lickClick() {
var temp;
if(!this.isPressed) { //点赞
temp=this.total+1;
this.likeImage = '/common/like.png';
} else { //取消点赞
temp = this.total-1;
this.likeImage='/common/unLike.png';
}
this.total=temp;
this.isPressed=!this.isPressed;
},
}
-
页面跳转
很多应用由多个页面组成，开发者需要通过页面路由将这些页面串联起来，按需实现跳转。
页面路由router根据页面的uri找到目标页面，从而实现跳转。
基础的两个页面之间的跳转的实现步骤：
1. 在“Project“窗口，打开entry > src > mainjsdefault，右键点击pages文件夹，选择NewJS Page，创建一个详情页。
2.调用router.push()路由到详情页
3.调用router.back()回到首页
<!--index的hml-->
<div class="container">
<button class="btn" value="To Page2" onclick="toPage2"></button>
<button class="btn" value="To Page2 with Params" onclick="toPage2WithParams"></button>
</div>
/*index的css*/
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 40px;
text-align: center;
width: 100%;
height: 40%;
margin: 10px;
}
.btn{
font-size: 20px;
width: 300px;
height: 50px;
color: #000000;
opacity: 0.9;
background-color: cadetblue;
margin: 10px;
}//index的js
import router from "@system.router"; //导入router模块
export default {
data: {
title: ""
},
onInit() {
this.title = this.$t('strings.world');
},
toPage2(){
router.push({
uri:'pages/page2/page2',//调用router.push()接口将uri指定的页面添加到路由栈中
}); // 即跳转到uri指定的页面。
},
toPage2WithParams(){
router.push({
uri:'pages/page2/page2',
params:{
title:'Huawei', //尝试跳转到此页面时对page2的title值进行修改
}
});
}
}
}<!--page2的hml-->
<div class="container">
<text class="title">
Hello {{title}}
</text>
<button class="btn" value="Go Back" onclick="goBack"></button>
</div>
/*page2.css*/
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 38px;
text-align: center;
width: 100%;
margin: 10px;
}
.btn{
font-size: 20px;
width: 300px;
height: 50px;
color: #000000;
opacity: 0.9;
background-color: cadetblue;
margin: 10px;
}//page2.js
import router from "@system.router";
export default {
data: {
title: ""
},
goBack(){
router.back();
}
}实现效果：
选项一：
选项二：文章来源：https://www.toymoban.com/news/detail-496782.html
文章来源地址https://www.toymoban.com/news/detail-496782.html
到了这里，关于HarmonyOS之构建用户界面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
