问题描述:实现自定义标签页后,在跳转时,图标激活状态无法实时更新,需要点击两次后图标才会切换激活状态
自定义标签页组件:
<custom-tabbar.vue>
<template>
<view>
<uv-tabbar :value="value" @change="change" iconSize=30>
<uv-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text"
:icon="item.icon"></uv-tabbar-item>
</uv-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
value: 0,
list: [{
"pagePath": "/pages/index/index",
"text": "首页",
"icon": "home"
},
{
"pagePath": "/pages/cloudF/cloudF",
"text": "云函数",
"icon": "list"
},
{
"pagePath": "/pages/user/user",
"text": "我的",
"icon": "account"
}
]
}
},
methods: {
change(e) {
uni.switchTab({
url: this.list[e].pagePath,
});
}
}
}
</script>
<style>
</style>
原实现方案:在图标的点击事件中实现页面跳转和数据绑定;
<template>
<view>
<uv-tabbar :value="value" @change="change" iconSize=30>
<uv-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text"
:icon="item.icon"></uv-tabbar-item>
</uv-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
value: 0,
list: [{
"pagePath": "/pages/index/index",
"text": "首页",
"icon": "home"
},
{
"pagePath": "/pages/cloudF/cloudF",
"text": "云函数",
"icon": "list"
},
{
"pagePath": "/pages/user/user",
"text": "我的",
"icon": "account"
}
]
}
},
methods: {
this.value = e;
change(e) {
uni.switchTab({
url: this.list[e].pagePath,
});
}
}
}
</script>
<style>
</style>
解决方案:在使用自定义标签页组件的页面中,在生命周期onshow时,切换图标激活。
<template>
<view>
<uv-icon size="60" name="home" @click="getValue"></uv-icon>
<button @click="getValue"></button>
</view>
<!-- 底部导航栏 -->
<custom-tabbar :value="0" ref=cusBar></custom-tabbar>
</template>
<script>
export default {
data() {
return {
}
},
methods:{
getValue(){
console.log(this.$refs.cusBar.$data.value)
}
},
onShow() {
this.$refs.cusBar.$data.value = 0
}
}
</script>
<style>
</style>
原因:俺也不晓得,才开始学习。