详细介绍uniapp小程序自定义底部tabbar样式的方法

uniapp自带的tabbar组件可以方便地实现底部导航栏的功能,原生tabBar是相对固定的配置方式,但是默认的样式可能无法满足我们的需求,所以我们需要自定义设置tabbar样式。下面我会详细介绍uniapp自定义tabbar样式的方法。

一、pages.json代码

pages.json这里只配置页面路径就可以。

"tabBar": {
		
		"color": "#7A7E83",
		"selectedColor": "#086d5b",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/xxx/xxx"
			},
			{
				"pagePath": "pages/xxx/xxx"
			},
			{
				"pagePath": "pages/xxx/xxx"
			}
		]
		
	},

二、创建一个tabBar.vue组件

在uniapp项目的components目录下创建一个名为tabbar的组件,该组件包含了tabbar的整体布局和动态切换效果。

tabbar.vue组件HTML部分代码如下:

<template>
	<view class="tabbar" >
	    <view class="tabbar-item" v-for="(item,index) in list" :key="index"         
         @click="changeTab(index)">
			<view class="select"  v-if="current == index">
				<view class="i-t position">
					<image class="img imgactive" mode="widthFix" 
                        :src="item.selectedIconPath" v-if="current == index"></image>
					<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
					<view class="text active" v-if="current == index">{{item.text}}</view>
					<view class="text" v-else>{{item.text}}</view>
				</view>
			</view>
			<view v-else>
				<image class="img" mode="widthFix" :src="item.selectedIconPath" 
                    v-if="current == index"></image>
				<image class="img" mode="widthFix" :src="item.iconPath" v-else></image>
				<view class="text active" v-if="current == index">{{item.text}}</view>
				<view class="text" v-else>{{item.text}}</view>
			</view>
	    </view>
	  </view>
</template>

tabbar.vue组件JS部分代码如下:

<script>
    export default {
    
        name:"tabbar",
		props: ['current'],
        data() {
			return {
                list:  [
				          {
				          	pagePath: "页面路径",
				          	iconPath: "图标路径",
				          	selectedIconPath: "选中的图标路径",
				          	text: "文字"
				          },
				          {
				          	pagePath: "页面路径",
				          	iconPath: "图标路径",
				          	selectedIconPath: "选中的图标路径",
				          	text: "文字"
				          },
				          {
				          	pagePath: "页面路径",
				          	iconPath: "图标路径",
				          	selectedIconPath: "选中的图标路径",
				          	text: "文字"
				          }
				        ]

            }
        },

        created() {
		      uni.hideTabBar() 
		    },
			
		 methods: {
		      changeTab(e) {
		        uni.switchTab({
		          url: '/' + this.list[e].pagePath,
		        })
		      }
		    }


}

</script>

tabbar.vue组件CSS部分代码如下:

<style>
 .tabbar {
	font-size: 1.5vh;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 6vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
	background-color: #fff;
    padding: 20rpx 0;
  },
  .tabbar-item {
	height: 100%;
    padding: 0 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  .img {
    height: 3vh;
    width: 2.5vh;
	margin: 0 4vw;
  }
  .text {
	text-align: center;
    color: #CACACA;
  }
  .i-t{
	  font-size: 1.5vh;
	  padding:2vw 2vh;
	  position: absolute;
	  bottom: 1vh;
  }
  .select{
	width: 10vh;
	height:10vh;
	border-radius: 10vh;
	background-color: #086d5b;
	margin-bottom: 4vh;
	position: relative;
  }
  .imgactive{
	 height: 3.5vh;
	 width: 3.2vh;
	 margin: 0 2.2vw;
  }
  .text.active {
    color: #fff;
  }
</style>

css部分样式可以根据项目需要自行修改

三、在需要显示tabbar的页面中引入tabbar组件

<template>
	<view>
		<tabbar current="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components:{
		  tabbar
		}
	}
</script>

以上就是uniapp小程序自定义底部tabbar样式的方法的详细内容啦·~

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Uniapp是一款基于Vue开发的跨平台框架,可以快捷地构建各种小程序、H5、APP等应用。在Uniapp中开发小程序时,底部tabbar是非常重要的一个组件,能够让用户快速切换应用中的不同功能页面。 在Uniapp中,可以使用自带的uni-tabbar组件进行开发,也可以使用自定义组件实现底部tabbar样式和功能。如果使用自定义组件,需要按照以下步骤进行: 1.创建底部tabbar自定义组件 通过新建一个自定义组件,可以使底部tabbar更加灵活,并且开发者可以根据自己的需要设计更加符合产品需求的底部导航栏。 2.在uni-app.json中配置tabBaruni-app.json配置文件中,可以设置tabBar选项,该选项包含了底部tabbar的相关配置,例如tabBar的位置、颜色等。在此选项中还可以设置tabBar的列表,包括图标、文字、路径等信息。 3.在页面中引用tabBar组件 在需要使用底部tabbar的页面中,需要引用上一步创建的自定义组件,并将tabBar的相关配置从uni-app.json中传递过来。通过这种方式可以使底部tabbar实现对组件的复用,并且灵活变化底部tabbar样式和功能。 以上就是使用Uniapp开发自定义底部tabbar的实现过程,开发者可以根据实际需求进行自己的设计和开发。 ### 回答2: Uniapp是一个基于Vue.js语法开发的跨平台框架,可以方便地将一个vue项目打包成多端应用,其中包括小程序。如果想自定义底部TabBar,需要先了解uniapp提供的原生组件以及自定义组件的开发。下面我们结合实例来进行讲解。 (1)使用原生组件实现底部TabBarUniapp提供了`tabbar`原生组件,这个组件包含多个`tabbar-item`组件,可以实现底部TabBar的功能。下面是一个简单的示例: ``` <tabbar> <tabbar-item icon="cu-home">首页</tabbar-item> <tabbar-item icon="cu-like">发现</tabbar-item> <tabbar-item icon="cu-message">消息</tabbar-item> <tabbar-item icon="cu-user">我的</tabbar-item> </tabbar> ``` 其中,`tabbar`组件需要包含多个`tabbar-item`组件,并且每个`tabbar-item`组件可以设置一个`icon`属性,代表底部导航栏的图标。你还可以设置其他属性以及绑定事件来实现更丰富的功能。 (2)使用自定义组件实现底部TabBar: 如果你需要更多自定义的功能,那么可以使用自定义组件开发。首先需要在uniapp项目中创建一个自定义组件,在本例中我们命名为`custom-tabbar`。 创建完毕后,需要在`custom-tabbar.vue`文件中定义组件模板。 ``` <template> <view class="custom-tabbar"> <view class="tabbar-item" @click="toHome"> <cu-icon name="homefill" :color="activeIndex == 0 ? '#2979ff' : '#808080'" class="tabbar-icon"></cu-icon> <view class="tabbar-text" :style="{color: activeIndex == 0 ? '#2979ff' : '#808080'}">首页</view> </view> <view class="tabbar-item" @click="toFind"> <cu-icon name="likefill" :color="activeIndex == 1 ? '#2979ff' : '#808080'" class="tabbar-icon"></cu-icon> <view class="tabbar-text" :style="{color: activeIndex == 1 ? '#2979ff' : '#808080'}">发现</view> </view> <view class="tabbar-item" @click="toMessage"> <cu-icon name="messagefill" :color="activeIndex == 2 ? '#2979ff' : '#808080'" class="tabbar-icon"></cu-icon> <view class="tabbar-text" :style="{color: activeIndex == 2 ? '#2979ff' : '#808080'}">消息</view> </view> <view class="tabbar-item" @click="toMine"> <cu-icon name="my" :color="activeIndex == 3 ? '#2979ff' : '#808080'" class="tabbar-icon"></cu-icon> <view class="tabbar-text" :style="{color: activeIndex == 3 ? '#2979ff' : '#808080'}">我的</view> </view> </view> </template> ``` 其中,`custom-tabbar`组件可以包含多个`tabbar-item`组件,并且每个`tabbar-item`组件可以设置一个`icon`属性以及绑定事件。在样式中,你可以自定义底部TabBar样式。 最后,在组件脚本中可以定义一些数据和方法,例如: ``` export default { data() { return { activeIndex: 0, }; }, methods: { toHome() { uni.switchTab({ url: '/pages/home/home', }); this.activeIndex = 0; }, toFind() { uni.switchTab({ url: '/pages/find/find', }); this.activeIndex = 1; }, toMessage() { uni.switchTab({ url: '/pages/message/message', }); this.activeIndex = 2; }, toMine() { uni.switchTab({ url: '/pages/mine/mine', }); this.activeIndex = 3; }, }, }; ``` 其中,`activeIndex`代表当前选中的底部TabBar,`toHome`等方法分别代表点击不同底部TabBar时的跳转逻辑。 最后,在app.vue文件中引入自定义组件即可: ``` <template> <view> <custom-tabbar></custom-tabbar> <router-view></router-view> </view> </template> <script> import customTabbar from '@/components/custom-tabbar.vue'; export default { components: { customTabbar, }, }; </script> ``` 通过这些操作,我们就可以轻松的实现自定义底部TabBar的功能了。 ### 回答3: Uniapp 是一款跨平台开发工具,可以通过一份代码开发出各种不同平台的应用,其中就包括了小程序。而在小程序中,底部的 tab 栏是非常重要的一部分,提供了让用户快速切换页面的功能。这里我们就来介绍一下如何封装自定义底部 tabbar 源码。 首先,我们需要在 pages 文件夹下新建一个 tabbar 文件夹,然后在其中新建 four 个页面文件夹,分别命名为 home、cart、mine、more。然后在 tabbar 文件夹下新建一个 index.vue 文件,代码如下: ```vue <template> <view> <router-view></router-view> <cu-tabbar-tabbar :tabbarList="tabbarList" :backgroundColor="backgroundColor" :color="color"></cu-tabbar-tabbar> </view> </template> <script> export default { name: "tabbar", data() { return { tabbarList: [ { pagePath: "/tabbar/home/home", iconPath: "/static/tabbar/home.png", selectedIconPath: "/static/tabbar/home-selected.png", text: "首页" }, { pagePath: "/tabbar/cart/cart", iconPath: "/static/tabbar/cart.png", selectedIconPath: "/static/tabbar/cart-selected.png", text: "购物车" }, { pagePath: "/tabbar/mine/mine", iconPath: "/static/tabbar/mine.png", selectedIconPath: "/static/tabbar/mine-selected.png", text: "我的" }, { pagePath: "/tabbar/more/more", iconPath: "/static/tabbar/more.png", selectedIconPath: "/static/tabbar/more-selected.png", text: "更多" } ], backgroundColor: "#ffffff", color: "#8a8a8a" }; } }; </script> ``` 这个 vue 文件中使用了 uniapp 提供的 cu-tabbar-tabbar 组件,该组件需要传入三个属性:tabbarList 用于定义 tabbar 中的条目信息,backgroundColor 用于定义 tabbar 的背景色,color 用于定义 tabbar 中文字和图标的颜色。 然后我们需要在每个页面组件中定义一个 tabPath 属性,用于指定当前页面所对应的 tabbar 条目的 path。代码如下: ```vue <script> export default { name: "home", data() { return { tabPath: "/tabbar/home/home" }; } }; </script> ``` 接着,我们需要在每个页面组件中实现一个 onTabItemTap 方法,该方法将接收一个参数,其中包含了用户点击的 tabbar 条目的信息。我们可以通过遍历页面所属的 tabbar 条目列表,找到与当前点击的 tabbar 条目相匹配的条目,然后跳转到对应的页面。代码如下: ```vue <script> export default { name: "home", data() { return { tabPath: "/tabbar/home/home" }; }, onTabItemTap(item) { const currentIndex = this.tabbarList.findIndex( tabItem => tabItem.pagePath === item.pagePath ); if (currentIndex !== -1) { uni.switchTab({ url: this.tabbarList[currentIndex].pagePath }); } } }; </script> ``` 最后,我们需要在 App.vue 中引入 tabbar 组件,并使用它替换掉原来的 page-container 组件,代码如下: ```vue <template> <cu-tabbar-tabbar :backgroundColor="backgroundColor" :color="color" :tabbarList="tabbarList" @switchTab="handleSwitchTab"> <router-view /> </cu-tabbar-tabbar> </template> <script> import CuTabbarTabbar from "@/cu-tabbar/components/cu-tabbar-tabbar.vue"; export default { components: { CuTabbarTabbar }, data() { return { backgroundColor: "#ffffff", color: "#8a8a8a", tabbarList: [ { pagePath: "/tabbar/home/home", iconPath: "/static/tabbar/home.png", selectedIconPath: "/static/tabbar/home-selected.png", text: "首页" }, { pagePath: "/tabbar/cart/cart", iconPath: "/static/tabbar/cart.png", selectedIconPath: "/static/tabbar/cart-selected.png", text: "购物车" }, { pagePath: "/tabbar/mine/mine", iconPath: "/static/tabbar/mine.png", selectedIconPath: "/static/tabbar/mine-selected.png", text: "我的" }, { pagePath: "/tabbar/more/more", iconPath: "/static/tabbar/more.png", selectedIconPath: "/static/tabbar/more-selected.png", text: "更多" } ] }; }, methods: { handleSwitchTab(item) { uni.switchTab({ url: item.pagePath }); } } }; </script> ``` 到这里,我们就完成了自定义底部 tabbar 的源码封装。可以根据实际需求自定义 tabbar样式和条目数目。通过这种方式封装后,可以大大提高开发效率,方便快捷地在不同的小程序中使用自定义底部 tabbar
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值