uni-app自定义tabbar(van-tabbar)

main.vue

js 复制代码
<template>
	<view>
		<index v-if="currentIndex === 0"></index>
		<signup v-else-if="currentIndex === 1"></signup>
		<test v-else-if="currentIndex === 2"></test>
		<custom-tabbar ref="tabBarComponent" @changeItem="changeItem"></custom-tabbar>
	</view>
</template>

<script>
	import signup from './signup/signup.vue'
	import test from './test.vue'
	import index from './index.vue'

	export default {
		components: {
			signup,
			test,
			index
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		methods: {
			changeItem(item) {
				this.currentIndex = item
			}
		}
	}
</script>

<style scoped>
page{
			background-color: #f6f7fb;
		}
</style>

custom-tabbar

js 复制代码
<template>
  <view>
    <van-tabbar :active="active" @change="onChange" :placeholder="true"  active-color="#3856ff" inactive-color="#666666">
      <van-tabbar-item v-for="(item, index) in list" :key="index" :icon="item.icon">
        {{ item.text }}
      </van-tabbar-item>
    </van-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      list: [
        {
          icon: 'home-o',
          text: '首页',
          url: '/pages/index'
        },
        {
          icon: 'search',
          text: '示例2',
          url: '/pages/signup/signup'
        },
        {
          icon: 'smile-o',
          text: '示例3',
          url: '/pages/test'
        }
      ]
    };
  },

  methods: {
    onChange(event) {
      this.active = event.detail;
	  this.$emit("changeItem",this.active);
      // uni.switchTab({
      //   url: this.list[event.detail].url
      // });
    },

    init() {
      const pages = getCurrentPages();
      const page = pages[pages.length - 1];
      this.active = this.list.findIndex(item => item.url === `/${page.route}`);
    }
  },

  mounted() {
    // this.init();
  }
};
</script>

全部菜单放在一个界面使用v-if显示隐藏的做法是因为单独页面的话第一次切换下标菜单栏会闪烁(但是使用v-if又要自定义导航栏,就...挺离谱的), 如果不使用这种v-if显示的话(单独页面)可以在每个菜单界面加上以下代码(会闪烁),如果大家有更好的方案可以交流一下

js 复制代码
		<!-- 引入组件,并添加 ref 属性 -->
		<custom-tabbar ref="tabBarComponent"></custom-tabbar>
		
		onShow() {
			this.$refs.tabBarComponent.init();
		},
		// 解除下面的注释
		// uni.switchTab({
      //   url: this.list[event.detail].url
      // });
相关推荐
罚时大师月色12 分钟前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
游戏开发爱好者824 分钟前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
漂流瓶jz25 分钟前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom26 分钟前
iframe实战:跨域通信与安全隔离
前端·安全
fury_12344 分钟前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js
weixin_405023371 小时前
包资源管理器NPM 使用
前端·npm·node.js
宁&沉沦1 小时前
Cursor 科技感的登录页面提示词
前端·javascript·vue.js
Dragonir1 小时前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
古一|2 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript