s***@gmail.com
s***@gmail.com
  • 发布:2024-09-09 21:42
  • 更新:2024-09-10 11:53
  • 阅读:164

微信小程序中自定义Tabbar组件在切换时无法调用onShow生命周期

分类:uni-app

问题环境是使用uniapp+vue3进行微信小程序开发,自定义Tabbar。需求是使用uni.switchTab切换页面时根据当前路由更改自定义Tabbar的某一个图标为active(选中状态)。在H5环境测试时使用页面生命周期activatedonShow都可以达成预期效果,但微信小程序环境下不支持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()  
    }
2024-09-09 21:42 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

你好,可以发一个测试工程吗?

要回复问题请先登录注册