当前位置:网站首页>uview 2.x版本 tabbar在uniapp小程序里头点击两次才能选中图标
uview 2.x版本 tabbar在uniapp小程序里头点击两次才能选中图标
2022-08-02 13:49:00 【独行侠_阿涛】
最近将uview2.x应用到基于uniapp开发的小程序里头,作者发现,确实好用。但是很快就发现了,使用了其中的tabbar组件,出现如题的问题。
出问题的代码如下:
<template>
<view>
<u-tabbar
:value="value6"
@change="changeTab"
activeColor="#00cc33"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<u-tabbar-item text="首页" :icon="value6==0?'home-fill':'home'" ></u-tabbar-item>
<u-tabbar-item text="我的" :icon="value6==1?'account-fill':'account'" ></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
value6:0,
list: [
{path: "/pages/index/index"},
{path: "/pages/user/user"},
]
}
},
methods: {
changeTab(e) {
uni.switchTab({
url: this.list[e].path,
success:()=>{
this.value6 = e
}
})
}
}
}
</script>
效果如下:

问题:点击我的,页面成功切换到了我的,但是图标没被选中(第一次会选中我的,然后闪变会首页,只是图标闪变,页面保持)。
找了一圈,没找到答案,但是我分析了下,可能是uni.switchTab导致当前的组件发生某种不可描述的问题吧。所以我注释掉uni.switchTab的代码,确实恢复正常了。
有了上面的结论,我觉得只要定义一个全局的变量来记录当前的图标位置,脱离当前组件的控制,问题应该就解决了,所以我在vuex里头定义了一个变量tabIndex,每次切换修改这个变量。果然,就成功的解决了如题的问题,修改后的代码如下:
<template>
<view>
<u-tabbar
:value="tabIndex"
@change="changeTab"
activeColor="#00cc33"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<u-tabbar-item text="首页" :icon="tabIndex==0?'home-fill':'home'" ></u-tabbar-item>
<u-tabbar-item text="我的" :icon="tabIndex==1?'account-fill':'account'" ></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
data() {
return {
interval:null,
list: [
{path: "/pages/index/index"},
{path: "/pages/user/user"},
]
}
},
computed: mapState({
tabIndex:'tabIndex'
}),
methods: {
changeTab(e) {
uni.switchTab({
url: this.list[e].path,
success:()=>{
this.setTabIndex(e)
s }
})
},
setTabIndex(tabIndex){
this.$store.state.tabIndex = tabIndex
}
}
}
</script>
<style>
</style>
边栏推荐
- SQL函数 UCASE
- 【C语言】手把手带你写游戏 —— 猜数字
- Singleton pattern of seven kinds of writing, you know?
- Get out of the machine learning world forever!
- [C language] Explicit array solution (1)
- "Second Uncle" is popular, do you know the basic elements of "exploding" short videos from the media?
- 鲁大师7月新机性能/流畅榜:骁龙8+正面对决天玑9000+,性能跑分突破123万!
- 鲲鹏devkit & boostkit
- Taurus.MVC V3.0.3 microservice open source framework released: Make the evolution of .NET architecture easier in large concurrency.
- 【C语言】虐打循环练习题(2)
猜你喜欢

Awesome!Alibaba interview reference guide (Songshan version) open source sharing, programmer interview must brush

苹果,与Web3 “八字不合”

如何通过DBeaver 连接 TDengine?

电脑死机,Word忘了保存怎么办?怎么恢复?(编辑器是WPS)

Do you know Dijkstra of graph theory?

k8s之KubeSphere部署有状态数据库中间件服务 mysql、redis、mongo

移动端适配,华为浏览器底色无法正常显示

鲁大师7月新机性能/流畅榜:骁龙8+正面对决天玑9000+,性能跑分突破123万!

CVE-2020-27986 (Sonarqube sensitive information leak) vulnerability fix

【622. 设计循环队列】
随机推荐
【C语言】手撕循环结构 —— for语句
[C language] Analysis of function recursion (2)
【C语言】剖析函数递归(3)
RISC-V instruction format and 6 basic integer instructions
苹果,与Web3 “八字不合”
LeetCode(剑指 Offer)- 53 - II. 0~n-1中缺失的数字
How to connect DBeaver TDengine?
Closures in JS
面试官:可以谈谈乐观锁和悲观锁吗
C# 编译错误:Compiler Error CS1044
tinymce 如何实现动态国际化
“二舅”火了,自媒体短视频“爆火”的基本要素,你知道吗?
二分查找 && 树
SQL函数 TRUNCATE
Oracle update error operation single table rollback
网络安全第六次作业
【C语言】函数哪些事儿,你真的get到了吗?(2)
Markdown怎么加入emoji
删除链表的节点
供应磷脂-聚乙二醇-羧基,DSPE-PEG-COOH,DSPE-PEG-Acid,MW:5000