“我正在参加「掘金·启航计划」”

说明

将在开发过程中遇到的问题及解决方式记录下来，以便加强巩固

一、自定义tabbar

因为要根据角色显示不同的底部菜单操作按钮，内置的将不再支持，所以决定自定义

1、问题描述

配置"custom": true后不生效，内置tabbar在钉钉小程序上仍然显示

2、复现步骤

• 根据文档在pages.json里面配置如下

"tabBar": {
		"custom": true, // 设置成true将不显示内置tabbar
                 // 此处需要将tabbar的路径写上，才可以调用uni.switchTab({...})跳转页面，避免页面跳转抖动
		"list": [
			{
				"pagePath": "pages/leader/home", 
				"text": "首页"
			},
			{
				"pagePath": "pages/leader/mine",
				"text": "我的"
			},
                        {
				"pagePath": "pages/leader/record",
				"text": "记录"
			},
                        {
				"pagePath": "pages/leader/publish",
				"text": "发布"
			}
                        ...
		]
	}

• 自定义tabbar组件并在页面引入（此处代码省略）
• 编译到钉钉小程序，发现内置的tabbar和自定义的tabbar都显示在页面上，内置的并没有隐藏

3、问题解决

• 猜想是list里面配置了text原因，全部删除text,只保留pagePath,运行发现内置tabbar仍然显示，发现跟list的配置无关

• 查找文档发现可以手动隐藏内置tabbar。在有tabbar的页面使用

onLoad () {
    uni.hideTabBar()
},

发现成功将内置tabbar隐藏，但又出现了新的问题。首次进入有tabbar的页面导航条显示了返回按钮，且点击返回到了一个空白页面（暂无解决办法）

• 最终换个实现思路，不通过自定义内置tabbar的方式。直接通过标识跟菜单项标识去匹配显示
• 代码简单实现

// tabbar
<template>
  <view class="tabBar">
    <view v-for="(item,index) in tabBarList" :key="index" class="tab-item" @click="tabBarChange(item.tag)">
      <template v-if="item.tag === pageTag">
        <image :src="item.selectIcon" mode="aspectFill"></image>
        <view :class="[userRole===USER_ROLE.SCHOOL?'active-blue':'active-orange','tab-title']">{{item.name}}</view>
      </template>
      <template v-else>
        <image :src="item.icon" mode="aspectFill"></image>
        <view class="tab-title">{{item.name}}</view>
      </template>
    </view>
  </view>
</template>
 
<script>
import { USER_ROLE } from '../common/constant.js'
export default {
  props: {
    pageTag: {
      type: String,
      default: "home"
    },
    userRole: {
      type: String,
      default: USER_ROLE.SCHOOL
    },
  },
  data () {
    return {
      USER_ROLE,
      tabBarList: [{
        name: "首页",
        icon: "/static/tabbar/home_no.png",
        selectIcon: this.userRole === USER_ROLE.SCHOOL ? "/static/tabbar/home_yes.png" : "/static/tabbar/home_leader.png",
        tag: "home",
      }, {
        name: "我的",
        icon: "/static/tabbar/me_no.png",
        selectIcon: this.userRole === USER_ROLE.SCHOOL ? "/static/tabbar/me_yes.png" : "/static/tabbar/me_leader.png",
        tag: "mine",
      }]
    }
  },
  methods: {
    tabBarChange (tag) {
      if(tag === this.pageTag) return
      this.$emit("getTag",tag)
    }
  }
}
</script>
 
<style scoped>
.tabBar {
  z-index: 99;
  background-color: #fff;
  border-top: 1px solid #d5d5d5;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
}

.tabBar .tab-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabBar .tab-item .tab-title {
  margin-top: 4rpx;
  font-size: 24rpx;
  color: #9d9d9d;
}

.tabBar .tab-item .active-blue {
  color: #25bdfe;
}

.tabBar .tab-item .active-orange {
  color: #ff7b00;
}

.tabBar .tab-item image {
  width: 40rpx;
  height: 40rpx;
  padding-bottom: 10rpx;
}
</style>

页面使用

<template>
  <view class="content">
    <!-- 内容区域 -->
    <view>
      <!-- 此处可优化成组件方式，这里只做简单演示 -->
      <view v-if="pageTag === 'home'">首页</view>
      <view v-else-if="pageTag === 'mine'">我的</view>
    </view>
    <TabBarVue @getTag="getTag" :pageTag="pageTag"/>
  </view>
</template>

<script>
import TabBarVue from "../../components/TabBar.vue";
export default {
  components: {
    TabBarVue,
  },
  data() {
    return {
      pageTag: "home",
    };
  },
  methods: {
    getTag(val) {
      this.pageTag = val;
    },
  },
};
</script>
<style scoped>
  .content {
    padding-top:300rpx;
  }
</style>

效果演示

二、自定义navbar

自定义navbar同tabbar一样，配置custom为true后仍然显示，需要在pages.json通过手动隐藏的方式去实现,然后在页面引入自定义navbar组件（此处不再赘述，效果图见上--首页）。关键代码如下

	"pages": [
		{
			"path": "pages/leader/home",
			"style": {
				"navigationBarTitleText": "",
				"mp-alipay": { // 核心代码
					"transparentTitle": "always",
					"titlePenetrate": "YES"
				}
			}
		},
	]

先暂时记录这两个坑，后续遇到其他的会持续更新