当前位置:网站首页>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>
边栏推荐
猜你喜欢
乐心湖‘s Blog——MySQL入门到精通 —— 囊括 MySQL 入门 以及 SQL 语句优化 —— 索引原理 —— 性能分析 —— 存储引擎特点以及选择 —— 面试题
【C语言】明解数组(1)
CVE-2020-27986(Sonarqube敏感信息泄漏) 漏洞修复
【C语言】夏日一题 —— 求最大公约数和最小公倍数
打破文件锁限制,以存储力量助力企业增长新动力
面试SQL语句,学会这些就够了!!!
Singleton pattern of seven kinds of writing, you know?
巴比特 | 元宇宙每日必读:蒂芙尼宣布推出限量版 CryptoPunk 定制吊坠
永远退出机器学习界!
RISC-V instruction format and 6 basic integer instructions
随机推荐
【C语言】夏日一题 —— 如何判断素数?
永远退出机器学习界!
第二讲 软件生命周期
打破文件锁限制,以存储力量助力企业增长新动力
Win11怎么修改关机界面颜色?Win11修改关机界面颜色的方法
【C语言】虐打循环结构练习题
GTK:Gdk-CRITICAL **: IA__gdk_draw_pixbuf: assertion ‘GDK_IS_DRAWABLE (drawable)’ failed
【C语言】细品分支结构——switch语句
【C语言】手撕循环结构 —— for语句
基于华为eNSP的企业网络规划
Closures in JS
Oracle update error operation single table rollback
Get out of the machine learning world forever!
C language improvement (3)
Awesome!Alibaba interview reference guide (Songshan version) open source sharing, programmer interview must brush
【C语言】虐打循环练习题(2)
【C语言】函数哪些事儿,你真的get到了吗?(1)
CVE-2020-27986 (Sonarqube sensitive information leak) vulnerability fix
苏州大学:从 PostgreSQL 到 TDengine
Kunpeng devkit & boostkit