当前位置:网站首页>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>
边栏推荐
猜你喜欢
高效代码静态测试工具Klocwork 2022.2——Portal全新升级、支持RLM
MySQL - ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using password: YES)
86.(cesium之家)cesium叠加面接收阴影效果(gltf模型)
鲁大师7月新机性能/流畅榜:骁龙8+正面对决天玑9000+,性能跑分突破123万!
[C language] Analysis of function recursion (2)
Win11怎么修改关机界面颜色?Win11修改关机界面颜色的方法
【C语言】剖析函数递归(2)
第二讲 软件生命周期
RHCE第一天作业
栈 && 队列
随机推荐
SQL函数 USER
基于华为eNSP的企业网络规划
RISC-V instruction format and 6 basic integer instructions
基于 WeihanLi.Npoi 实现excel导入时纯汉字的日期转换
Mysql index details (with pictures and texts)
Oracle数据库的闪回技术
方舟生存进化淘宝面板服务器是怎么一回事?
智能指针-使用、避坑和实现
苏州大学:从 PostgreSQL 到 TDengine
高效代码静态测试工具Klocwork 2022.2——Portal全新升级、支持RLM
Taurus.MVC V3.0.3 microservice open source framework released: Make the evolution of .NET architecture easier in large concurrency.
binary search && tree
为什么四个字节的float表示的范围比八个字节的long要广
【C语言】剖析函数递归(3)
科研试剂DSPE-PEG-VIP,二硬脂酰基磷脂酰乙醇胺-聚乙二醇-血管活性肠肽VIP
【C语言】手撕循环结构 —— for语句
CSDN(成长一夏竞赛)- 最大数
Detailed explanation of ORACLE expdp/impdp
Mysql视图
ttl电平与rs232电平转换电路(232电平定义)