当前位置:网站首页>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>
边栏推荐
猜你喜欢
随机推荐
Word | 关于删除分节符(下一页)前面的版式就乱了解决方案
Interviewer: Can you talk about optimistic locking and pessimistic locking?
Seata Distributed Transaction
leetcode 504. Base 7 七进制数 (简单)
SQL函数 UCASE
"Second Uncle" is popular, do you know the basic elements of "exploding" short videos from the media?
Win11怎么修改关机界面颜色?Win11修改关机界面颜色的方法
第二讲 软件生命周期
Closures in JS
WPF效果第一百九十三篇之登录实现
js数组递归使用
js array recursively use
Mysql index details (with pictures and texts)
[C language] Explicit array solution (1)
保姆级教程:写出自己的移动应用和小程序(篇三)
How to do short video food from the media?5 steps to teach you to get started quickly
暑假集训-week2图论
【C语言】虐打循环练习题(2)
How to improve the originality of self-media creation and create popular works?
科研试剂DSPE-PEG-VIP,二硬脂酰基磷脂酰乙醇胺-聚乙二醇-血管活性肠肽VIP









