|
@@ -0,0 +1,125 @@
|
|
|
|
|
+<!-- custom-tab-bar/index.vue -->
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="custom-tab-bar" v-if="show">
|
|
|
|
|
+ <view class="tab-bar-item" v-for="(item, index) in list" :key="index" @click="switchTab(item, index)">
|
|
|
|
|
+ <text class="tab-text" :class="{ active: selectedIndex == index }">
|
|
|
|
|
+ {{ item.text }}
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ props: {
|
|
|
|
|
+ show: {
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: true
|
|
|
|
|
+ },
|
|
|
|
|
+ currentIndex: {
|
|
|
|
|
+ type: Number,
|
|
|
|
|
+ default: 0
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ selectedIndex: 0, // 改个名字避免混淆
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ pagePath: '/pages/chanpinXuanze/index',
|
|
|
|
|
+ text: "版本0",
|
|
|
|
|
+ iconPath: 'static/images/tabbar/unselect/xuanke-sj.png',
|
|
|
|
|
+ selectedIconPath: 'static/images/tabbar/select/xuanke-sj.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ pagePath: '/pages/chanpinneirong/index',
|
|
|
|
|
+ text: "学习1",
|
|
|
|
|
+ iconPath: 'static/images/tabbar/unselect/xuexi-sj.png',
|
|
|
|
|
+ selectedIconPath: 'static/images/tabbar/select/xuexi-sj.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ pagePath: '/pages/game/index',
|
|
|
|
|
+ text: "游戏2",
|
|
|
|
|
+ iconPath: 'static/images/tabbar/unselect/faxian-sj.png',
|
|
|
|
|
+ selectedIconPath: 'static/images/tabbar/select/faxian-sj.png'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ pagePath: '/pages/chanpinMy/my',
|
|
|
|
|
+ text: "我的3",
|
|
|
|
|
+ iconPath: 'static/images/tabbar/unselect/wode-sj.png',
|
|
|
|
|
+ selectedIconPath: 'static/images/tabbar/select/wode-sj.png'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ watch: {
|
|
|
|
|
+ currentIndex: {
|
|
|
|
|
+ handler(newVal) {
|
|
|
|
|
+ console.log('接收到父组件传递的currentIndex:', newVal);
|
|
|
|
|
+ this.selectedIndex = newVal;
|
|
|
|
|
+ },
|
|
|
|
|
+ immediate: true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ switchTab(item, index) {
|
|
|
|
|
+ console.log('点击Tab,index:', index, '当前选中的selectedIndex:', this.selectedIndex);
|
|
|
|
|
+
|
|
|
|
|
+ // 如果点击的是当前已选中的Tab,不执行跳转
|
|
|
|
|
+ if (this.selectedIndex === index) {
|
|
|
|
|
+ console.log('点击的是当前已选中的Tab,不跳转');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ console.log('执行跳转到:', item.pagePath);
|
|
|
|
|
+ // 注意:这里不要更新 selectedIndex,因为跳转后目标页面会传递新的currentIndex
|
|
|
|
|
+ uni.switchTab({
|
|
|
|
|
+ url: item.pagePath
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 可以添加mounted生命周期,打印初始状态
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ console.log('TabBar组件mounted,初始currentIndex:', this.currentIndex);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+ /* 样式保持不变 */
|
|
|
|
|
+ .custom-tab-bar {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ height: 100rpx;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ border-top: 1rpx solid #F0F0F0;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab-bar-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab-icon {
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ margin-bottom: 6rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab-text {
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #7A7E83;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab-text.active {
|
|
|
|
|
+ color: #007AFF;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|