当前位置:网站首页>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>
边栏推荐
- els 长条方块变形条件、边界碰撞判定
- 关于Google词向量模型(googlenews-vectors-negative300.bin)的导入问题
- Get out of the machine learning world forever!
- 玉溪卷烟厂通过正确选择时序数据库 轻松应对超万亿行数据
- WiFi Association&Omnipeek抓包分析
- Seata Distributed Transaction
- .Net 5.0 Quick Start Redis
- "Second Uncle" is popular, do you know the basic elements of "exploding" short videos from the media?
- Fabric.js 动态设置字号大小
- 电脑死机,Word忘了保存怎么办?怎么恢复?(编辑器是WPS)
猜你喜欢

Singleton pattern of seven kinds of writing, you know?

Automatically generate code generator recommendation-code-gen

网络安全第四次作业

This binding to detailed answers

多个驻外使领馆发提醒 事关赴华出行、人身财产安全
![[C language] Explicit array solution (1)](/img/d2/26e3e64bb07578a6348747c00abb64.png)
[C language] Explicit array solution (1)

tinymce 如何实现动态国际化

86.(cesium之家)cesium叠加面接收阴影效果(gltf模型)

Redis all

鲁大师7月新机性能/流畅榜:骁龙8+正面对决天玑9000+,性能跑分突破123万!
随机推荐
拯救流浪猫 | 「喵先锋」系列数字版权盲盒明日开抢
OpenMMLab简介
els 长条方块变形条件、边界碰撞判定
网络安全第四次作业
二进制中1的个数
Detailed explanation of ORACLE expdp/impdp
SQL函数 TRUNCATE
[typescript] Use the RangePicker component in antd to implement time limit the previous year (365 days) of the current time
高效代码静态测试工具Klocwork 2022.2——Portal全新升级、支持RLM
WiFi Association&Omnipeek抓包分析
好用的php空间,推荐国内三个优质的免费PHP空间[通俗易懂]
CVE-2020-27986(Sonarqube敏感信息泄漏) 漏洞修复
86.(cesium之家)cesium叠加面接收阴影效果(gltf模型)
你真的懂单例模式么
社区收藏缓存设计重构实战
【C语言】夏日一题 —— 求最大公约数和最小公倍数
LeetCode(剑指 Offer)- 53 - II. 0~n-1中缺失的数字
wait() ,notify(),notifyAll()以及wait()与sleep()比较
【C语言】函数哪些事儿,你真的get到了吗?(1)
Based on the flask mall administrator functions