提交 df64e294 编写于 作者: W wanganxp

完善自定义tabbar的业务逻辑,但发现了Android和iOS的v-show bug

上级 7d7bb34a
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
}, },
created() { created() {
this.loadData() this.loadData()
console.log("tab1 created");
}, },
methods: { methods: {
loadData() { loadData() {
...@@ -40,6 +41,7 @@ ...@@ -40,6 +41,7 @@
}, },
scrollTop(top : number) { scrollTop(top : number) {
(this.$refs["listView"] as UniElement).scrollTop = top (this.$refs["listView"] as UniElement).scrollTop = top
console.log("tab1 to top");
} }
} }
} }
......
<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,因为销毁再创建影响性能 -->
<tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1> <tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
<tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2> <tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
</view> </view>
...@@ -65,11 +66,12 @@ ...@@ -65,11 +66,12 @@
] as TabItem[], ] as TabItem[],
selectedIndex: -1, selectedIndex: -1,
displayArrow: false, displayArrow: false,
lastTab1Top:0,
tabViewHeight: 0 tabViewHeight: 0
} }
}, },
onLoad() { onLoad() {
uni.$on('tabchange', this.onTabPageEvent) uni.$on('tabchange', this.onTabPageEvent) //监听tab1页面发出的tabchange事件,触发到本页面的onTabPageEvent方法。为了判断tab1的scroll-view滚动距离
}, },
onReady() { onReady() {
this.setSelectedIndex(0) this.setSelectedIndex(0)
...@@ -80,14 +82,29 @@ ...@@ -80,14 +82,29 @@
}, },
methods: { methods: {
onTabClick(index : number) { onTabClick(index : number) {
if (this.selectedIndex == index && index == 0) { if (this.selectedIndex == index && index == 0 && this.displayArrow == true) { //首页当tab按钮变成向上时,点向上就滚动到顶
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)
} }
else if (index !=0){ //不在首页时,把箭头变成图标
console.log("22");
this.displayArrow = false
}
else if (index == 0 && this.selectedIndex !=0){ //从其他tab切回首页时,检查是否需要把图标变箭头
console.log("33",this.lastTab1Top);
this.displayArrow = this.lastTab1Top > this.tabViewHeight
}
this.setSelectedIndex(index); this.setSelectedIndex(index);
console.log('index: ',index);
console.log('this.selectedIndex: ',this.selectedIndex);
console.log('this.displayArrow: ',this.displayArrow);
console.log('this.lastTab1Top: ',this.lastTab1Top);
}, },
onTabPageEvent(top : number) { onTabPageEvent(top : number) {
this.displayArrow = top > this.tabViewHeight // console.log('top: ',top); //iOS在v-show为false时,不应该触发这个事件
this.displayArrow = top > this.tabViewHeight //滚动1屏后,就把第一个tab的图标从首页变成向上箭头
this.lastTab1Top = top
}, },
setSelectedIndex(index : number) { setSelectedIndex(index : number) {
if (this.selectedIndex === index) { if (this.selectedIndex === index) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册