一、目标
使用小型系統支援的基礎控件實作tab頁簽容器。
二、背景
OpenHarmony 标準系統中有tabs容器,在标準系統中tabs是一種常見的界面導航,通過頁簽容器,使用者可以快捷地通路應用的不同子產品,但在小型系統中沒有提供tab頁簽容器,目前的需求是在L1裝置上實作類似于tabs頁簽容器的功能。
三、環境
裝置:君正x2000開發闆
系統:OpenHarmony 3.0.0.0(LTS)
四、效果
4.1視訊效果
小型裝置自定義tabs效果
4.2效果截圖
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsQTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cGcq5yN1QjNxgjNzQjMiZWN4UGNyYzX1MDNzQTM3AzLcRDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL0M3Lc9CX6MHc0RHaiojIsJye.jpg)
五、實作思路
從效果圖中我們可以看出,tab頁簽容器包括:
1、可切換的菜單;
2、可切換的内容容器。
分析:小型系統所支援的基礎容器中,菜單可以通過基礎容器(div)+文本容器(text)組合實作;可切換的内容容器可以通過滑動容器(swiper)實作;在将菜單容器的點選事件click與滑動容器切換時的回調事件change事件結合互聯就可以實作一個自定義的tab頁簽容器。
備注:如果你對上面提到的容器API還不熟悉,可以參看以下内容:
- swiper API
- test API
六、完整代碼
說明:元件的代碼包括三個部分:hml、css、js,因為代碼比較簡單,是以沒有寫注釋,如果有不明白的地方可以留言。
<!-- tabsView.hml -->
<div class="container">
<div class="tabs-title">
<div class="tabs-item" onclick="onSelectSetting">
<div class="tabs-item-menu">
<text class="tabs-menu-text">設定</text>
<div class="tabs-menu-line-white" show="{{menuSettingStyle}}"></div>
</div>
</div>
<div class="tabs-item-line"></div>
<div class="tabs-item" onclick="onSelectTest">
<div class="tabs-item-menu">
<text class="tabs-menu-text">測試</text>
<div class="tabs-menu-line-white" show="{{menuTestStyle}}"></div>
</div>
</div>
</div>
<div class="tabs-content-line"></div>
<swiper class="tabs-content" index="{{index}}" loop="false" duration="0" vertical="false" onchange="onSelectChange">
<div class="swiper-item primary-item">
<image class="img" src="/common/images/1.jpg"></image>
</div>
<div class="swiper-item warning-item">
<image class="img" src="/common/images/2.jpg"></image>
</div>
</swiper>
</div>
/*tabsView.css*/
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: orange;
}
.title {
font-size: 76px;
text-align: center;
width:100%;
height: 100px;
}
.tabs-title{
width: 100%;
height: 80px;
flex-direction: row;
justify-content: center;
align-items: center;
/* border-width: 1px;*/
/* border-color: red;*/
/* border-style: solid;*/
}
.tabs-item{
width: 49%;
height: 80px;
background-color: orange;
}
.tabs-item-line{
width: 0.5%;
height: 80px;
background-color: white;
}
.tabs-item-menu{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 80px;
}
.tabs-menu-text{
color: white;
font-size: 35fp;
height: 75px;
}
.tabs-menu-line-white{
width: 100%;
height: 5px;
background-color: white;
}
.tabs-menu-line-orange{
width: 100%;
height: 5px;
background-color: orange;
}
.tabs-content-line{
width: 100%;
height: 0.2%;
background-color: orange;
}
.tabs-content{
width: 100%;
height: 100%;
margin-left: 0.75%;
margin-right: 0.75%;
}
.swiper-item {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.primary-item {
background-color: #785698;
}
.warning-item {
background-color: #ff7500;
}
.img{
width: 100%;
height: 100%;
}
//tabsView.js
export default {
data: {
menuSettingStyle:true,
menuTestStyle:false,
index:0
},
onInit() {
},
/**
* 選擇設定菜單
*/
onSelectSetting() {
this.menuSettingStyle = true;
this.menuTestStyle= false;
this.index = 0;
},
/**
* 選擇測試菜單
*/
onSelectTest() {
this.menuSettingStyle = false;
this.menuTestStyle= true;
this.index = 1;
},
/**
* 滑動元件頁面變化
*/
onSelectChange(num) {
this.index = num.index;
console.log("change curIndex:" + this.index);
switch(this.index) {
case 0: {
this.menuSettingStyle = true;
this.menuTestStyle= false;
break;
}
case 1: {
this.menuSettingStyle = false;
this.menuTestStyle= true;
break;
}
default :
break;
}
}
}
七、感謝
如果您能看到最後,還希望您能動動手指點個贊,一個人能走多遠關鍵在于與誰同行,我用跨越山海的一路相伴,希望得到您的點贊。
想了解更多關于鴻蒙的内容,請通路:
51CTO和華為官方合作共建的鴻蒙技術社群
https://ost.51cto.com/#bkwz