在uni-app中，底部导航
栏切换时
刷新页面可以通过以下几种方式实现：
1. 使用`on
TabItemTap`事件监听导航
栏切换。在App.vue文件中，可以通过监听`on
TabItemTap`事件来处理导航
栏切换的操作，然后在对应的
页面中执行
刷新页面的操作。
```vue
// App.vue
<template>
<div>
<
tab-bar></
tab-bar>
<router-view></router-view>
</div>
</template>
<script>
export default {
methods: {
// 监听底部导航
栏切换
on
TabItemTap(item) {
// item.index 表示点击的是第几个导航
栏
// 根据自己的需求执行相应的操作
if (item.index === 0) {
// 执行
页面刷新的操作
this.$refs.home.refresh();
} else if (item.index === 1) {
// 执行
页面刷新的操作
this.$refs.news.refresh();
} else if (item.index === 2) {
// 执行
页面刷新的操作
this.$refs.profile.refresh();
}
}
}
}
</script>
```
2. 使用
页面的生命周期钩子函数。在对应的
页面中，可以使用`onShow`生命周期钩子函数来处理
页面切换时的
刷新操作。
```vue
// Home.vue
<script>
export default {
onShow() {
// 执行
页面刷新的操作
this.refresh();
},
methods: {
refresh() {
//
页面刷新的逻辑
console.log('Home
页面刷新');
}
}
}
</script>
```
3. 使用`uni.$on`和`uni.$emit`进行事件通信。在对应的
页面中，可以使用`uni.$on`监听自定义事件，在底部导航
栏切换时使用`uni.$emit`触发自定义事件，从而执行
页面刷新的操作。
```vue
// Home.vue
<script>
export default {
mounted() {
// 监听自定义事件
uni.$on('refreshHome', () => {
// 执行
页面刷新的操作
this.refresh();
});
},
methods: {
refresh() {
//
页面刷新的逻辑
console.log('Home
页面刷新');
}
}
}
</script>
```
```vue
// App.vue
<script>
export default {
methods: {
// 监听底部导航
栏切换
on
TabItemTap(item) {
if (item.index === 0) {
// 触发自定义事件，通知Home
页面刷新
uni.$emit('refreshHome');
} else if (item.index === 1) {
// 触发自定义事件，通知News
页面刷新
uni.$emit('refreshNews');
} else if (item.index === 2) {
// 触发自定义事件，通知Profile
页面刷新
uni.$emit('refreshProfile');
}
}
}
}
</script>
```
这些方法都可以实现底部导航
栏切换时
刷新页面的效果，选择适合自己项目的方式进行实现即可。
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
