当前位置:网站首页>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>
边栏推荐
猜你喜欢

Get out of the machine learning world forever!
![Embedded system driver primary [2] - based on character device driver _ basic framework](/img/71/4feb9e42fd2ff1bc4a2d49798657b2.png)
Embedded system driver primary [2] - based on character device driver _ basic framework

【C语言】细品分支结构——switch语句

【C语言】细品分支结构——if-else语句

网络安全第四次作业

永远退出机器学习界!

删除链表的节点

数值的整数次方

乐心湖‘s Blog——MySQL入门到精通 —— 囊括 MySQL 入门 以及 SQL 语句优化 —— 索引原理 —— 性能分析 —— 存储引擎特点以及选择 —— 面试题

暑假集训-week2图论
随机推荐
Mysql索引详解(图文并茂)
存储过程详解
MySQL - ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using password: YES)
[C language] Analysis of function recursion (2)
二极管及其应用
【C语言】函数哪些事儿,你真的get到了吗?(1)
requestparam注解接的收的是什么格式(玄机赋注解)
线程安全问题及关键字synchronized,volatile
[C language] Analysis of function recursion (1)
Mysql index details (with pictures and texts)
binary search && tree
rust使用mysql插入数据
C语言提高篇(三)
Selenium本地打开远程浏览器
【C语言】夏日一题 —— 求最大公约数和最小公倍数
电脑死机,Word忘了保存怎么办?怎么恢复?(编辑器是WPS)
els strip collision deformation judgment
基于深度学习的图像检索方法!
面试官:可以谈谈乐观锁和悲观锁吗
Mysql视图