介绍
UniApp是一款基于Vue.js开发的跨平台应用框架，能够同时构建Android、iOS、H5等多个平台的应用，具有很高的开发效率和良好的用户体验。在UniApp中，实现自定义TabBar并且保持页面切换时不刷新是一项常见的需求。
实现方式
UniApp官方提供了uni.switchTab方法，可以实现TabBar的切换，并且不刷新页面。我们可以利用这个方法来实现自定义TabBar。
首先，我们需要在页面上定义一个自定义的TabBar组件，可以使用uni-icons来设置TabBar的图标。在自定义TabBar组件的methods中，使用uni.switchTab来切换TabBar页面，使用uni.getStorageSync和uni.setStorageSync来设置和获取当前所选中的Tab。
在App.vue中，使用uni.getStorageSync来获取当前所选中的Tab，并将其作为初始页面进行展示。
具体代码如下：
<template>
<div>
<!-- 自定义TabBar -->
<custom-tab-bar @tabChange="changeTab" />
<!-- 页面内容 -->
<view>
<!-- 此处放置各个Tab对应的页面内容 -->
</view>
</div>
</template>
<script>
import CustomTabBar from './components/CustomTabBar.vue';
export default {
components: {
CustomTabBar,
},
methods: {
changeTab(tabIndex) {
// 切换TabBar页面时，保存当前选中的Tab
uni.setStorageSync('currentTab', tabIndex);
// 切换TabBar页面
uni.switchTab({
url: this.tabList[tabIndex].pagePath,
});
},
},
onLoad() {
// 获取当前选中的Tab
const currentTab = uni.getStorageSync('currentTab');
// 设置当前选中的Tab为首页
if (currentTab) {
uni.switchTab({
url: this.tabList[currentTab].pagePath,
});
}
},
};
</script>
<style>
/* 样式可根据需求进行自定义 */
</style>
避免页面刷新
在上述代码中，我们通过使用uni.switchTab方法切换TabBar页面，并通过读取和保存uni.getStorageSync和uni.setStorageSync方法获取和设置当前选中的Tab。这样，即使进行页面切换，仍然能够保持页面的状态，避免刷新。
总结
通过以上步骤，我们可以实现自定义TabBar并且保持页面切换时不刷新的功能。UniApp的uni.switchTab方法能够帮助我们实现这一需求，同时通过uni.getStorageSync和uni.setStorageSync方法保存当前选中的Tab，使得页面切换后能够恢复之前的状态。
希望本篇博客能够帮助到大家，如果有任何问题欢迎提问讨论。感谢阅读！
参考文档：
本文来自极简博客，作者：幻想的画家，转载请注明原文链接：UniApp自定义TabBar页面不刷新
