当前位置:网站首页>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>
边栏推荐
- binary search && tree
- 【typescript】使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)
- Oracle数据库的闪回技术
- [C language] Explicit array solution (1)
- Large and comprehensive pom file example
- Automatically generate code generator recommendation-code-gen
- Cannot determine loading status from target frame detached when selenium chrome driver is running
- 鲁大师7月新机性能/流畅榜:骁龙8+正面对决天玑9000+,性能跑分突破123万!
- 【C语言】虐打循环练习题(2)
- HALCON: 内存管理(Memory Management)
猜你喜欢
随机推荐
二分查找 && 树
高效代码静态测试工具Klocwork 2022.2——Portal全新升级、支持RLM
二进制中1的个数
Interviewer: Can you talk about optimistic locking and pessimistic locking?
矩阵中的路径
The uniapp/applet onload method executes the interpretation every time the page is opened
关于Google词向量模型(googlenews-vectors-negative300.bin)的导入问题
How to do short video food from the media?5 steps to teach you to get started quickly
乐心湖‘s Blog——MySQL入门到精通 —— 囊括 MySQL 入门 以及 SQL 语句优化 —— 索引原理 —— 性能分析 —— 存储引擎特点以及选择 —— 面试题
First acquaintance of scrapy framework 1
Cannot determine loading status from target frame detached when selenium chrome driver is running
数值的整数次方
Selenium本地打开远程浏览器
鲁大师7月新机性能/流畅榜:性能跑分突破123万!
关于C#使用DateTime数据的细节
【C语言】手撕循环结构 ——do...while语句及循环练习题(1)
科研试剂DSPE-PEG-VIP,二硬脂酰基磷脂酰乙醇胺-聚乙二醇-血管活性肠肽VIP
Awesome!Alibaba interview reference guide (Songshan version) open source sharing, programmer interview must brush
暑假集训-week2图论
requestparam注解接的收的是什么格式(玄机赋注解)









