Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
df64e294
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5992
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
df64e294
编写于
5月 28, 2024
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
完善自定义tabbar的业务逻辑,但发现了Android和iOS的v-show bug
上级
7d7bb34a
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
22 addition
and
3 deletion
+22
-3
pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
+2
-0
pages/template/custom-tab-bar/custom-tab-bar.uvue
pages/template/custom-tab-bar/custom-tab-bar.uvue
+20
-3
未找到文件。
pages/template/custom-tab-bar/custom-tab-bar-tab1.uvue
浏览文件 @
df64e294
...
@@ -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");
}
}
}
}
}
}
...
...
pages/template/custom-tab-bar/custom-tab-bar.uvue
浏览文件 @
df64e294
<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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录