1. 了解uni-app前端框架
uni-app是一个基于Vue.js框架的前端开发框架，可以将一个项目同时打包成iOS、Android和Web三种不同的应用形式。它提供统一的开发接口，让开发人员可以方便地进行跨端开发。
uni-app将页面的跳转方式分为两种，一种是使用Vue-router，一种是使用uni-app提供的页面跳转API。前者适用于需要进行页面传参、跳转动画、在页面中监听返回事件等情况，而后者适用于在tabbar中进行页面切换等情况。
2. uni-app tabbar页面跳转的问题
一般情况下，在使用uni-app开发一个tabbar页面时，我们可以利用uni-tabbar控件来进行页面切换。uni-tabbar的具体用法可以参考uni-app官方文档。
但是，有时候在进行页面跳转时会遇到一些问题，比如在切换到tabbar的某个页面时，出现了空白的情况。这个问题实际上是由于uni-app的页面缓存引起的，我们可以在切换到tabbar页面时，手动触发页面的更新函数来解决这个问题。
3. 解决方案
3.1 创建一个Mixin
在uni-app中，我们可以使用Mixin来对页面的生命周期函数进行统一的管理。这里，我们可以创建一个mixin文件，命名为tabbarMixin.js，来对页面的onShow函数进行扩展。
// tabbarMixin.js
export default {
onShow() {
this.$forceUpdate(); // 手动触发页面更新函数
}
}
然后，在需要使用这个扩展的页面中，我们只需要将这个mixin引入即可。
// index.vue
<template>
<view>
<!-- 页面内容 -->
</view>
</template>
<script>
import tabbarMixin from '@/mixins/tabbarMixin.js';
export default {
mixins: [ tabbarMixin ],
// 其他页面相关代码
}
</script>
这个方法可以解决大多数页面跳转空白的情况，但是在某些特殊情况下，这个方法可能无法生效。在这种情况下，我们可以尝试使用下面提到的第二种方法来解决问题。
3.2 手动更新tabbar页面
在tabbar页面切换时，我们可以手动触发页面的更新函数来进行页面的更新。对于这种情况，我们可以使用uni-app提供的uni.$emit来触发事件，然后在tabbar页面中监听这个事件，进行页面更新。
在需要进行页面切换的页面中，我们可以使用uni.$emit来触发事件，并传递需要更新的页面的标识。
// page1.vue
<template>
<view>
<button @click="gotoPage2">跳转到page2</button>
</view>
</template>
<script>
export default {
methods: {
gotoPage2() {
uni.$emit('updatePage', 'page2');
uni.navigateTo({
url: '/pages/page2.vue'
});
}
}
}
</script>
然后，在tabbar页面中，我们可以使用uni.$on来监听这个事件，并在事件触发时进行页面更新。
// tabbar.vue
<template>
<view>
<uni-tabbar :show='showTabBar' @click='onClick' :tabbar-list='tabBars' :custom='false' :current='defaultTab' :type=''switch''></uni-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
tabBars: [
{
"text": "首页",
"iconPath": "static/tabbar/Home.png",
"selectedIconPath": "static/tabbar/homeSelected.png",
"pagePath": "/pages/index.vue"
},
{
"text": "分类",
"iconPath": "static/tabbar/Sort.png",
"selectedIconPath": "static/tabbar/SortSelected.png",
"pagePath": "/pages/category.vue"
},
{
"text": "购物车",
"iconPath": "static/tabbar/Cart.png",
"selectedIconPath": "static/tabbar/CartSelected.png",
"pagePath": "/pages/cart.vue"
},
{
"text": "我的",
"iconPath": "static/tabbar/Me.png",
"selectedIconPath": "static/tabbar/meSelected.png",
"pagePath": "/pages/user.vue"
}
]
}
},
computed: {
defaultTab() {
return this.$store.state.tabBar.currentTab;
},
showTabBar() {
return !(this.$route.path === "/pages/income.vue");
}
},
mounted() {
uni.$on('updatePage', (page) => {
// 这里根据传递的标识进行页面更新
if (page === 'page2') {
this.$forceUpdate();
}
});
}
}
</script>
4. 总结
在uni-app中，使用tabbar页面进行页面切换时，可能会出现页面空白的情况。针对这个问题，我们可以使用两种方法进行解决：第一种是使用mixin来监听页面的onShow函数，手动触发页面更新函数；第二种是在进行页面切换时，手动触发页面更新事件，并在tabbar页面中进行监听，进行页面更新。