提交 0c87f44d 编写于 作者: DCloud-yyl's avatar DCloud-yyl

调整自定义tabbar示例,使用visibility替换v-show实现tab页面切换效果

上级 d14431c9
<template> <template>
<view class="tabs"> <view class="tabs">
<view ref="tabview" class="tab-view"> <view ref="tabview" class="tab-view">
<!-- 注意tab的逻辑是:第一次使用v-if创建,创建之后不再使用v-if,而使用v-show来隐藏和显示。不能设置tab的v-if为false,因为销毁再创建影响性能 --> <!-- 注意tab的逻辑是:第一次使用v-if创建,创建之后不再使用v-if,而是设置visibility来隐藏和显示。不能设置tab的v-if为false,因为销毁再创建影响性能 -->
<tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1> <tab1 ref="tab1" class="tab-page" v-if="tabList[0].init" :style="{visibility:(selectedIndex==0?'visible':'hidden')}"></tab1>
<tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2> <tab2 ref="tab2" class="tab-page" v-if="tabList[1].init" :style="{visibility:(selectedIndex==1?'visible':'hidden')}"></tab2>
</view> </view>
<view ref="tabbar" class="tab-bar"> <view ref="tabbar" class="tab-bar">
<view class="tab-item" @click="onTabClick(0)"> <view class="tab-item" @click="onTabClick(0)">
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
return { return {
tabList: [ tabList: [
{ {
init: false, init: true,
preload: false preload: false
} as TabItem, } as TabItem,
{ {
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
preload: false preload: false
} as TabItem, } as TabItem,
] as TabItem[], ] as TabItem[],
selectedIndex: -1, selectedIndex: 0,
displayArrow: false, displayArrow: false,
lastTab1Top:0, lastTab1Top:0,
tabViewHeight: 0 tabViewHeight: 0
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
uni.$on('tabchange', this.onTabPageEvent) //监听tab1页面发出的tabchange事件,触发到本页面的onTabPageEvent方法。为了判断tab1的scroll-view滚动距离 uni.$on('tabchange', this.onTabPageEvent) //监听tab1页面发出的tabchange事件,触发到本页面的onTabPageEvent方法。为了判断tab1的scroll-view滚动距离
}, },
onReady() { onReady() {
this.setSelectedIndex(0) // this.setSelectedIndex(0)
this.tabViewHeight = (this.$refs["tabview"] as UniElement).getBoundingClientRect().height this.tabViewHeight = (this.$refs["tabview"] as UniElement).getBoundingClientRect().height
}, },
onUnload() { onUnload() {
...@@ -86,13 +86,14 @@ ...@@ -86,13 +86,14 @@
console.log("11"); console.log("11");
this.displayArrow = false; this.displayArrow = false;
(this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0) (this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
this.lastTab1Top = 0;//Todo: 临时解决android平台scroll-view在某些情况未触发onscroll事件的bug
} }
else if (index !=0){ //不在首页时,把箭头变成图标 else if (index !=0){ //不在首页时,把箭头变成图标
console.log("22"); console.log("22");
this.displayArrow = false this.displayArrow = false
} }
else if (index == 0 && this.selectedIndex !=0){ //从其他tab切回首页时,检查是否需要把图标变箭头 else if (index == 0 && this.selectedIndex !=0){ //从其他tab切回首页时,检查是否需要把图标变箭头
console.log("33",this.lastTab1Top); console.log("33",this.lastTab1Top, this.tabViewHeight);
this.displayArrow = this.lastTab1Top > this.tabViewHeight this.displayArrow = this.lastTab1Top > this.tabViewHeight
} }
this.setSelectedIndex(index); this.setSelectedIndex(index);
...@@ -148,6 +149,12 @@ ...@@ -148,6 +149,12 @@
flex: 1; flex: 1;
} }
.tab-page {
position: absolute;
width: 100%;
height: 100%;
}
.tab-bar { .tab-bar {
flex-direction: row; flex-direction: row;
height: 56px; height: 56px;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册