uniapp中Tabbar突出图标功能实现

最新推荐文章于 2025-04-25 16:45:53 发布

举个栗子 .

最新推荐文章于 2025-04-25 16:45:53 发布

阅读量1.1k

点赞数 1

文章标签： uni-app 前端 vue.js

本文链接：https://blog.youkuaiyun.com/zhuxiaolong1234/article/details/127816601

版权

本文介绍了如何在uni-app中配置pages.json的tabBar属性，包括颜色、选中状态、边框样式等，并展示了如何在App.vue中监听并处理tabBar中间按钮的点击事件，实现页面跳转到指定路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在pages.json里面配置tabbar属性

"tabBar": {
      "color": "#999999",
      "selectedColor": "#FA436A",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "height": "50px",
      "fontSize": "10px",
      "iconWidth": "24px",
      "spacing": "3px",
      "midButton": {
      
        "height": "70px", //修改距离底下的高度 
        "iconWidth": "50px", // 缩放图片大小 自己调整 
        "iconPath": "static/33cd2904c1d0e00cce947d9248eee4a.png",
        "selectedIconPath": "static/5x471a3cb9de2330f0d7ee72547772bd7.png",
        "text": "油枪"
      },
      "list": [
        {
          "pagePath": "pages/workbenck/workbenck",
          "iconPath": "static/icon/gongzuotai-copy.png",
          "selectedIconPath": "static/workdeskPink.png",
          "text": "工作台"
        },
        {
          "pagePath": "pages/mine/mine",
          "iconPath": "static/icon/zhanghao.png",
          "selectedIconPath": "static/myPersonPink.png",
          "text": "我的"
        }
      ]
    },

tabbar配置minbutton 点击完从哪里跳转? 在App.vue当中配置

onLaunch: function() {
		console.log('App Launch')
		uni.onTabBarMidButtonTap(()=>{
        console.log(123) //你先试试点一下有没有反应 有反应了再跳
        uni.navigateTo({
          url:'/pages/sweepCode/sweepCode'
        })
		  });
      
		},