小程序官方tabbar和自定义tabbar

最新推荐文章于 2024-09-02 12:25:42 发布
最新推荐文章于 2024-09-02 12:25:42 发布
阅读量883 收藏
点赞数
文章标签： 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64103049/article/details/131476498
版权

uniapp官方tabbar：

  1. 打开项目中的 pages.json 文件。

  2. 在 JSON 对象中添加一个名为 tabBar 的字段，并设置其值为一个对象。

  3. 在 tabBar 对象中，配置 color 和 selectedColor 字段来定义 TabBar 的默认颜色和选中项的颜色。示例：

     

    "tabBar": {
  "color": "#999999",  //默认颜色
  "selectedColor": "#FF0000" //选中项的颜色
}

  4. 添加一个名为 list 的数组字段，用于定义 TabBar 的每个选项。

  5. 在 list 数组中，每个对象表示一个选项，可以设置 pagePath、text、iconPath 和 selectedIconPath 字段来定义选项的路径、文本、默认图标和选中图标。示例：
     

    "tabBar": {
  "color": "#999999", //tab 上的文字默认颜色
  "selectedColor": "#FF0000", //tab 上的文字选中时的颜色
  "borderStyle": "black", //bat上边框颜色
  "backgroundColor": "#fff", //tab的背景色
  "list": [
    {
      "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
      "text": "首页",                    //tab 上按钮文字
      "iconPath": "static/tabbar/home.png", //默认图片路径
      "selectedIconPath": "static/tabbar/home-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/cart/cart",//页面路径，必须在 pages 中先定义
      "text": "购物车",             //tab 上按钮文字
      "iconPath": "static/tabbar/cart.png", //默认图片路径
      "selectedIconPath": "static/tabbar/cart-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/profile/profile", //页面路径，必须在 pages 中先定义
      "text": "个人中心", //tab 上按钮文字
      "iconPath": "static/tabbar/profile.png",//默认图片路径
      "selectedIconPath": "static/tabbar/profile-selected.png" //选中时的图片路径
    }
  ]
}

    配置完毕后，保存 pages.json 文件

uniapp自定义tabbar组件

在 pages.json 文件中配置自定义 TabBar。在tabbar中加上"custom": true，就变成了自定义tabbar。代码如下：

"tabBar": {
  "custom": true,     //改为自定义tabbar 
  "color": "#999999", //tab 上的文字默认颜色
  "selectedColor": "#FF0000", //tab 上的文字选中时的颜色
  "borderStyle": "black", //bat上边框颜色
  "backgroundColor": "#fff", //tab的背景色
  "list": [
    {
      "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
      "text": "首页",                    //tab 上按钮文字
      "iconPath": "static/tabbar/home.png", //默认图片路径
      "selectedIconPath": "static/tabbar/home-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/cart/cart",//页面路径，必须在 pages 中先定义
      "text": "购物车",             //tab 上按钮文字
      "iconPath": "static/tabbar/cart.png", //默认图片路径
      "selectedIconPath": "static/tabbar/cart-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/profile/profile", //页面路径，必须在 pages 中先定义
      "text": "个人中心", //tab 上按钮文字
      "iconPath": "static/tabbar/profile.png",//默认图片路径
      "selectedIconPath": "static/tabbar/profile-selected.png" //选中时的图片路径
    }
  ]
}

然后在下边加上usingComponents字段

"tabBar": {
  "custom": true,     //改为自定义tabbar 
  "color": "#999999", //tab 上的文字默认颜色
  "selectedColor": "#FF0000", //tab 上的文字选中时的颜色
  "borderStyle": "black", //bat上边框颜色
  "backgroundColor": "#fff", //tab的背景色
  "list": [
    {
      "pagePath": "pages/index/index",  //页面路径，必须在 pages 中先定义
      "text": "首页",                    //tab 上按钮文字
      "iconPath": "static/tabbar/home.png", //默认图片路径
      "selectedIconPath": "static/tabbar/home-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/cart/cart",//页面路径，必须在 pages 中先定义
      "text": "购物车",             //tab 上按钮文字
      "iconPath": "static/tabbar/cart.png", //默认图片路径
      "selectedIconPath": "static/tabbar/cart-selected.png" //选中时的图片路径
    },
    {
      "pagePath": "pages/profile/profile", //页面路径，必须在 pages 中先定义
      "text": "个人中心", //tab 上按钮文字
      "iconPath": "static/tabbar/profile.png",//默认图片路径
      "selectedIconPath": "static/tabbar/profile-selected.png" //选中时的图片路径
    }
  ]
}，
 //usingComponents字段是在页面的 JSON 配置文件（如 pages.json）中使用的，用于声明并引入自定义组件。

  "usingComponents": {
	    "customtabbar": "custom-tab-bar/index"。//引入自定义组件，键为组件名，值为组件路径
	  },

这样代码写完就是在pages.json里配置完成了，然后封装一个组件名字为custom-tab-bar的tabbar文件

文件里包含四个文件复制即可如下：

 

index.js：

Component({
	data: {
		selected: null,
		color: '#78747F',
		selectedColor: '#007AFF',
		list: [{
			pagePath: '/tabbar/home/index',
			iconPath: '/static/icons/img/home.png',
			selectedIconPath: '/static/icons/img/home2.png',
			text: '首页'
		}, {
			pagePath: '/tabbar/me/index',
			iconPath: '/static/icons/img/me.png',
			selectedIconPath: '/static/icons/img/me2.png',
			text: '我的'
		}]
	},
	attached() { },
	methods: {
		switchTab(e) {
			const data = e.currentTarget.dataset
			const url = data.path
			console.log(data);
			console.log(url);
				wx.switchTab({
					url  //就是要跳转的tabbar页面
				})
		},

	}
})

index.json:

{
  "component": true
}

index.wxml:这个是tabbar html页面 list是tabbar里定义的对象

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="{{!item.text ? 'big' : ''}} tab-bar-item flex-1 item{{index}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
	<image wx-if="{{selected === index}}"  src="{{item.selectedIconPath}}" mode="aspectFit"></image>
	<image wx-if="{{selected !== index}}"  src="{{item.iconPath}}" mode="aspectFit"></image>
    <view class="btn-box" wx-if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}">
		{{item.text}}
	<!-- 	<button wx-if="{{index === 4}}" class="btn" type="default" open-type="getUserInfo" bindgetuserinfo="auth"></button> -->
	</view>
  </view>
</view>

index.wxss:

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height:55px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index:-1;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 13px;
}
.tab-bar-item image {
  width:36.23rpx;
  height:48rpx;
}

/* .tab-bar-item-image-0 {
  width:36.23rpx;
  height:48rpx;
} */

/* .tab-bar-item-image-1 { 
  width:100rpx;
  height:48rpx !important;
} */

.tab-bar-item.big image{
	width: 61.59rpx;
	height: 61.59rpx;
}
.tab-bar-item cover-image {
  width: 48.91rpx;
  height: 48.91rpx;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
.tab-bar-item  {
	position: relative;
}
.tab-bar-item .btn-box .btn {
	opacity: 0;
	padding: 0;
	height: 50px;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

 封装完以后在每个tabbar页面中加一下代码：

 

home页面
onShow() {
			const page = this.$mp.page
			console.log(page.getTabBar(),'page');
			if (typeof page.getTabBar === 'function' && page.getTabBar()) {
				page.getTabBar().setData({
					selected: 0 这个下标就是封装tabbar中list数组中的数据下标
				})
			}
		
		},


//page 是通过 this.$mp.page 获取的当前页面实例
//typeof page.getTabBar === 'function' 是用于检查 page.getTabBar 是否为一个函数，以确保可以调用 getTabBar 方法。
//page.getTabBar() 调用 getTabBar 方法，返回当前页面所属的 TabBar 实例。
//page.getTabBar().setData({ selected: 0 }) 调用 TabBar 实例的 setData 方法，将选中项的索引设置为 0。这样就会使 TabBar 中索引为 0 的项高亮显示，表示当前选中的项。
me页面
onShow() {
			const page = this.$mp.page
			console.log(page.getTabBar(),'page');
			if (typeof page.getTabBar === 'function' && page.getTabBar()) {
				page.getTabBar().setData({
					selected: 1 //这个下标就是封装tabbar中list数组中的数据下标
				})
			}
		
		},


//page 是通过 this.$mp.page 获取的当前页面实例
//typeof page.getTabBar === 'function' 是用于检查 page.getTabBar 是否为一个函数，以确保可以调用 getTabBar 方法。
//page.getTabBar() 调用 getTabBar 方法，返回当前页面所属的 TabBar 实例。
//page.getTabBar().setData({ selected: 1 }) 调用 TabBar 实例的 setData 方法，将选中项的索引设置为 1。这样就会使 TabBar 中索引为 1 的项高亮显示，表示当前选中的项。

 这样自定义tabbar就好了！！！

周小航.
关注
小程序 自定义 tabBar
weixin_53532986的博客
04-10 2305
tabBar 自定义 tabBar 1、自定义tabBar 的一般实现步骤 自定义 tabBar 分为 3 大步骤，分别是： ① 配置信息 在 app.json 中的 tabBar 项指定 custom 字段，“custom”:ture 在项目根目录下创建custom-tab-bar文件夹, 并创建index组件 { "tabBar"：{ "custom":true // 必填 "color": "#000000", "selectedColor": "#000000", "backg
小程序：自定义tabbar
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
03-29 819
自定义tabbar
【微信小程序】自定义 tabBar
weixin_40874076的博客
09-02 4420
首先来看一下页面演示效果，页面中有下方标签栏是自定义 tabBar。自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。自定义组件Vant 组件库MobX 数据共享组件样式隔离组件数据监听器组件的 behaviorsVant 样式覆盖。
iOS开发简记（2）：自定义tabbar
weixin_30480075的博客
11-17 117
tabbar是放在APP底部的控件。常见的APP都使用tabbar来进行功能分类的管理，比如微信、QQ等等。 小程需要一个特殊一点的tabbar，要求突显中间的那个按钮，让中间按钮特别显眼，从而引导用户去点击。 所以，让中间按钮大于两边的按钮，是一个基本的要求。 使用常规的UITabBar跟UITabBarController不能满足这个需求，于是，扩展它，自定一下，是一个办法。 ...
小程序tabbar 自定义
03-01
微信小程序下方的突出Tabbar。客户要求下边的导航必须有凸出的效果，后来调用这个实现。里面有详细的使用步骤。
小程序自定义tabbar
atu1111的博客
07-29 3455
小程序自定义tabbar   微信官方小程序自定义tabbar 1. 配置信息   [在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。 "tabBar": { "custom": true, "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "black" , "list": [{ "selectedIconPat
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
uniapp小程序自定义动态tabbar
04-08
2. 小程序TabBar概述 小程序的TabBar是底部固定显示的导航栏，通常包含多个页面的快捷入口。微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决...
微信小程序官方动态自定义底部tabBar的例子
10-16
此外，微信小程序官方提供的动态自定义tabBar还允许我们在小程序页面中通过编程方式动态修改`tabBar`的内容，以响应用户的操作。 例如，在页面的js文件中，我们可以使用`wx.setTabBarBadge`或`wx.removeTabBarBadge...
小程序（三）配置tabbar及自定义tabbar样式
09-26
关于tabbar部分，官方文档是有明确的说明的，当然，我这里是不存在把官方文档给你复制一遍的情况。...这个主要是使用小程序自带的tabbar，在项目根目录下的app.json中配置，这个简单配置一下就可以了。
微信小程序自定义tabbar
07-24
微信小程序自定义tabbar【内有点击和滑动两种方式】 {{itemName}} {{itemName}} <!--可滑动切换tanbar--> {{itemName}} {{itemName}}
自定义的TabBar
11-26
自己定义的 比较特殊不同于系统自带tabar的风格，封转的也挺不错的 ，适合于做特殊效果的tabar
自定义TabBar
06-30
自定义TabBar例子。
微信小程序自定义tabBar
2401_84097820的博客
04-16 511
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
【微信小程序】自定义tabbar
韩旭不会敲代码吧的博客
03-17 1702
自定义tabbar
微信小程序 底部tabbar如何自定义呢
最新发布
09-12
3. **响应事件**：在自定义的TabBar组件中，你可以监听小程序提供的`onTabItemTap`事件，当用户点击某个选项时触发相应处理。 4. **定制样式**：如果需要更精细的样式调整，可以在相应的WXML和WXSS文件中编写自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值