midButton实现tabbar中间图标突出

JULY要减肥

已于 2024-08-28 14:59:55 修改

阅读量161

点赞数 1

分类专栏： uniapp 文章标签： uniapp

于 2024-08-28 14:53:51 首次发布

本文链接：https://blog.csdn.net/m0_48738983/article/details/141640667

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

！！不支持wx小程序，需要自定义tabbar(指路官方文档）https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1.配置pages.json

"tabBar": {
		"custom": true, // 启用自定义tabBar -------------1
		"color": "#7A7E83",
		"selectedColor": "#007afe",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"iconPath": "static/tabbar/home1.png",
				"selectedIconPath": "static/tabbar/home2.png",
				"pagePath": "pages/home/home",
				"text": "首页"
			},
			{
				"iconPath": "static/tabbar/yuy1.png",
				"selectedIconPath": "static/tabbar/yuy2.png",
				"pagePath": "pages/reservation/index",
				"text": "预约"
			},
			{
				"iconPath": "static/tabbar/dl1.png",
				"selectedIconPath": "static/tabbar/dl2.png",
				"pagePath": "pages/guide/index",
				"text": "导览"
			},
			{
				"iconPath": "static/tabbar/my1.png",
				"selectedIconPath": "static/tabbar/my2.png",
				"pagePath": "pages/mine/index",
				"text": "我的"
			},
		],
		"midButton": {-------------------------------------2
			"width": "60px",
			"height": "60px",
			"iconWidth": "50px",
			"iconPath": "/static/tabBar/code.png"
		}
	},

2.此时不支持点击

需要在app.vue配置，跳转到指定页面

<script>
export default {
  onLaunch: function() {
        uni.onTabBarMidButtonTap(() => {
          uni.navigateTo({
            url: '/pages/code/code',
          });
        })
      },
};
</script>