问题环境是使用uniapp+vue3进行微信小程序开发,自定义Tabbar。需求是使用uni.switchTab
切换页面时根据当前路由更改自定义Tabbar的某一个图标为active(选中状态)。在H5环境测试时使用页面生命周期activated
和onShow
都可以达成预期效果,但微信小程序环境下不支持activated
且局部组件不会在页面刷新时执行onShow
。
目前找到的解决方案是在父组件的onShow
中通过ref
调用Tabbar的更新方法current_tab
从而达到刷新效果,但自觉这种实现方法实在不够优雅。
求问有无解决办法或更好的替代方案?
自定义Tabbar组件的核心代码如下。
<view v-for="(item, index) in list" class="single-tab" :key="item.text + index"
@click="ch_tab(index)">
<view>
<image
:src="current === index ? item.selectedIconPath : item.iconPath"
:style="item.onlyIcon ? { height: '96rpx', width: '100rpx' } : { height: '44rpx', width: '44rpx' }"
/>
</view>
<view v-if="!item.onlyIcon" :style="{ color: current === index ? '#1B1D38': '#999CB4' }">{{ item.text }}</view>
</view>
methods: {
ch_tab(idx) {
this.current = idx
uni.switchTab({
url: this.list[idx].pagePath,
})
},
current_tab() {
let path_list = getCurrentPages()
let path = path_list[path_list.length - 1].route
console.debug(path)
if (/(^\/$)|(pages\/index\/index)/.test(path)) {
this.current = 0
} else if (/pages\/category\/index/.test(path)) {
this.current = 1
} else if (/pages\/talk\/index/.test(path)) {
this.current = 3
} else if (/pages\/user\/index/.test(path)) {
this.current = 4
} else {
this.current = -1
}
}
},
mounted() {
this.current_tab()
},
activated() {
this.current_tab()
}
1 个回复
DCloud_UNI_yuhe
你好,可以发一个测试工程吗?