uni-app底部导航tabBar的使用

uni-app的艰难学习之路

step1—学习

官网说明:官网>配置>page.json>tabBar
在这里插入图片描述

step2—使用

1、在pages中新建文件
在这里插入图片描述
2、在pages.json文件里写配置代码

{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
			{
				"path": "pages/index/index",
				"style": {
					"navigationBarTitleText": "天天好物"
				}
			},
      {
        "path" : "pages/search/search",
        "style" : {
          "navigationBarTitleText": "搜索"
        }
      },
      {
        "path" : "pages/rankingList/rankingList",
        "style" : {
          "navigationBarTitleText": "排行榜"
        }
      },
      {
        "path" : "pages/dongdongqiang/dongdongqiang",
        "style" : {
				  "navigationBarTitleText": "咚咚抢"
			  }
      },
      {
        "path" : "pages/me/me",
        "style" : {
				  "navigationBarTitleText": "我的"
			  } 
      }
    ],
"tabBar": {
		"color":"#8a8a8a",
		"selectedColor":"#d4237a",
		"borderStyle":"black",
		"backgroundColor":"#ffffff",
		"list": [
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"static/home_normal.png",
				"selectedIconPath":"static/home.png"
			},
			{
				"pagePath":"pages/search/search",
				"text":"搜索",
				"iconPath":"static/search_normal.png",
				"selectedIconPath":"static/search.png"
			},
			{
				"pagePath":"pages/rankingList/rankingList",
				"text":"排行榜",
				"iconPath":"static/paihangbang_normal.png",
				"selectedIconPath":"static/paihangbang.png"
			},
			{
				"pagePath":"pages/dongdongqiang/dongdongqiang",
				"text":"咚咚抢",
				"iconPath":"static/alert_normal.png",
				"selectedIconPath":"static/alert.png"
			},
			{
				"pagePath":"pages/me/me",
				"text":"我的",
				"iconPath":"static/me_normal.png",
				"selectedIconPath":"static/me.png"
			}
		]	
	 }
	}
  • 11
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
uni-app中,你可以通过以下步骤来实现自定义底部tabbar: 1. 在main.js文件中添加以下代码段,以解决点击两次才能选择icon的问题: ``` Vue.mixin({ methods: { setTabBarIndex(index) { if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { this.$mp.page.getTabBar().setData({ selected: index }) } } } }) ``` 2. 在index.wxss文件中重新定义tabbar的样式,包括背景、高度、字体大小等。以下是一个例子: ```css .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05); box-sizing: content-box; } .tab-bar-item { flex: auto; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; height: 120rpx; } /* 自定义样式 */ .tab-bar-item.diy { margin-top: 0!important; background: transparent; position: relative; flex: inherit; width: 134rpx; } .tab-bar-item image { width: 48rpx; height: 48rpx; overflow: initial; } .tab-bar-item view { font-size: 24rpx; } .tab-bar-item image.diy { position: absolute; width: 134rpx; height: 140rpx; bottom: 25.6%; z-index: 100; } .tab-bar-item view.diy { margin-top: 90rpx; background: #fff; width: 100%; height: 100%; padding-top: 58rpx; z-index: 99; } ``` 通过以上步骤,你可以在uni-app中实现自定义底部tabbar使用以上的代码段和样式定义,你可以根据需求自定义底部tabbar的样式和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uni-app-tabbar:uni-app底部初步实现(不支持小程序)](https://download.csdn.net/download/weixin_42172572/15923240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uni-app自定义底部tabbar](https://blog.csdn.net/Janent168/article/details/129809136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值