1. Toy模板网首页
  2. > Toy博客

uniapp里面tabbar自定义的方法

6月前 作者：爱吃玉米的螃蟹 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp里面tabbar自定义的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一种不封装自定义tabbar，需要的页面tabbar

需要的步骤

第一步，pages.json需要

"tabBar": {
		"custom": true,//自定义
		"color": "#666666",
		"selectedColor": "#DF5458",
		"list": [{
				"pagePath": "pages/index1"
			},
			{
				"pagePath": "pages/index2"
			},
			{
				"pagePath": "pages/index3"
			},
			{
				"pagePath": "pages/index4"
			}
		]
	},

第二步对应的页面

<u-tabbar class="tabbar" :value="value1" @change="change1" :fixed="true" activeColor="red" inactiveColor="#000" :placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item text="首页">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
			</u-tabbar-item>
			<u-tabbar-item text="放映厅">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
			</u-tabbar-item>
			<u-tabbar-item text="直播">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
			</u-tabbar-item>
		</u-tabbar>

uni-app自定义tabbar,windows,java,服务器

第二种封装的tabbar

引入组件，注册组件，给组件传当前页面数

uni-app自定义tabbar,windows,java,服务器

组件

<template>
	<u-tabbar class="tabbar" :value="val" @change="change1" :fixed="true" :border='true' activeColor="red" inactiveColor="#000"
		:placeholder="false" :safeAreaInsetBottom="false">
		<u-tabbar-item text="首页">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
		</u-tabbar-item>
		<u-tabbar-item text="放映厅">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
		</u-tabbar-item>
		<u-tabbar-item text="直播">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的">
			<image class="u-page__item__slot-icon" slot="active-icon"
				src="https://cdn.uviewui.com/uview/common/bell-selected.png" style="height:20px;width: 20px;"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon"
				src="https://cdn.uviewui.com/uview/common/bell.png" style="height:20px;width: 20px;"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			val: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [{
						path: "pages/index1"
					},
					{
						path: "pages/index2"
					},
					{
						path: "pages/index3"
					},
					{
						path: 'pages/index4'
					},
				]
			};
		},
		methods: {
			change1(e) {
				uni.switchTab({
					url: '/' + this.list[e].path,
				})
			},
		}
	}
</script>

<style lang="scss">

</style>

就这两种

或

<template>
	<view>
		<view :style="'height: '+height+'px;'"></view>
		<u-tabbar v-model="val" @change="tabbarChange" :fixed="true" :placeholder="false" :border='false'
			activeColor="#d81e06" inactiveColor="#666666" :safeAreaInsetBottom="false">
			<view class="tab">
				<u-tabbar-item text="商城">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem1.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem5.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="分类">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem2.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem6.png"></image>
				</u-tabbar-item>
				<u-tabbar-item>
					<image slot="inactive-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
					<image slot="active-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
				</u-tabbar-item>
				<u-tabbar-item text="购物车">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem3.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem8.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="我的">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem4.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem7.png"></image>
				</u-tabbar-item>
			</view>
		</u-tabbar>
	</view>


</template>
<script>
	export default {
		props: {
			val: {
				type: Number,
				default: 0
			}
		},
		// options: {
		// 	styleIsolation: 'shared'
		// },
		created() {
			const info = uni.getSystemInfoSync()
			const scale = 750 / info.windowWidth;
			this.height = 156 / scale
		},
		data() {
			return {
				height: '',
				value4: 0,
				list: [{
						path: "pages/index1"
					},
					{
						path: "pages/classify/classify"
					},
					{
						path: "pages/shop/index"
					},
					{
						path: "pages/shopping/shopping"
					},
					{
						path: 'pages/index/index'
					},
				]
			}
		},
		// props: {
		// 	current: Number,
		// },
		onLoad() {},
		onShow() {

		},
		methods: {
			tabbarChange(e) {
				if (e == 2) {
					uni.scanCode({
						scanType: ["qrCode"],
						success(e) {
							uni.reLaunch({
								url: "/packageA/pages/index?q=" + encodeURIComponent(e.result)
							})
						}
					})
				} else {
					uni.switchTab({
						url: '/' + this.list[e].path,
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.icon2 {
		width: 156rpx;
		height: 156rpx;
	}

	.tab {
		height: 156rpx;
		background-image: url(@/static/image/farem55.png);
		background-repeat: no-repeat;
		background-size: 750rpx;
		background-position: top center;
		display: flex;
		width: 100%;
	}
	::v-deep.u-tabbar-item__text {
		font-size: 10px !important;
	}
</style>
<template>
	<view>
		<view :style="'height: '+height+'px;'"></view>
		<u-tabbar v-model="val" @change="tabbarChange" :fixed="true" :placeholder="false" :border='false'
			activeColor="#d81e06" inactiveColor="#666666" :safeAreaInsetBottom="false">
			<view class="tab">
				<u-tabbar-item text="商城">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem1.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem5.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="分类">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem2.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem6.png"></image>
				</u-tabbar-item>
				<u-tabbar-item>
					<image slot="inactive-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
					<image slot="active-icon" src="@/static/image/farem9.png" style="width: 120rpx;height: 120rpx;margin-top: -116rpx;"></image>
				</u-tabbar-item>
				<u-tabbar-item text="购物车">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem3.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem8.png"></image>
				</u-tabbar-item>
				<u-tabbar-item text="我的">
					<image class="icon" slot="inactive-icon" src="@/static/image/farem4.png"></image>
					<image class="icon" slot="active-icon" src="@/static/image/farem7.png"></image>
				</u-tabbar-item>
			</view>
		</u-tabbar>
	</view>


</template>
<script>
	export default {
		props: {
			val: {
				type: Number,
				default: 0
			}
		},
		created() {
			const info = uni.getSystemInfoSync()
			const scale = 750 / info.windowWidth;
			this.height = 156 / scale
		},
		data() {
			return {
				height: '',
				value4: 0,
				list: [{
						path: "pages/index1"
					},
					{
						path: "pages/classify/classify"
					},
					{
						path: "pages/shop/index"
					},
					{
						path: "pages/shopping/shopping"
					},
					{
						path: 'pages/index/index'
					},
				]
			}
		},
		onLoad() {},
		onShow() {

		},
		methods: {
			tabbarChange(e) {
				if (e == 2) {
					uni.scanCode({
						scanType: ["qrCode"],
						success(e) {
							uni.reLaunch({
								url: "/packageA/pages/index?q=" + encodeURIComponent(e.result)
							})
						}
					})
				} else {
					uni.switchTab({
						url: '/' + this.list[e].path,
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.icon2 {
		width: 156rpx;
		height: 156rpx;
	}

	.tab {
		height: 156rpx;
		background-image: url(@/static/image/farem55.png);
		background-repeat: no-repeat;
		background-size: 750rpx;
		background-position: top center;
		display: flex;
		width: 100%;
	}
	::v-deep.u-tabbar-item__text {
		font-size: 10px !important;
	}
</style>

引入组件的页面样式加入

uni-app自定义tabbar,windows,java,服务器

uni-app自定义tabbar,windows,java,服务器

要不然不透

还有就是tabbar不定高度，就按照自己高度定

uni-app自定义tabbar,windows,java,服务器

如果定了高度就按照

uni-app自定义tabbar,windows,java,服务器

uni-app自定义tabbar,windows,java,服务器文章来源地址https://www.toymoban.com/news/detail-840765.html

到了这里，关于uniapp里面tabbar自定义的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • uni-app 之 tabBar 底部切换按钮

    uni-app 之 tabBar 底部切换按钮

    uni-app 之 tabBar 底部切换按钮 1693289945724.png // 常用颜色 // d81e06 紅 // #f4ea2a 黃 // #1afa29 綠 // #1296db 藍 // #13227a 青 // #d4237a 紫 // #ffffff 白 // #2c2c2c 黑

    2024年02月09日
    浏览(35)
  • uni-app动态tabBar，根据不同用户展示不同的tabBar

    uni-app动态tabBar，根据不同用户展示不同的tabBar

    因为我们用的是uni-app框架开发，所以在创建项目的时候直接创建uni-ui的项目即可，这个项目模板中自带了uni的一些好用的组件和api。 起初我想着这个效果不难实现，因为官方也有api可以直接使用，所以我最开始尝试就是使用uni的api完成，也就是这个 ：uni.setTabBarItem(options) 我

    2024年02月09日
    浏览(32)
  • uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni-app uni.switchTab和uni.reLaunch跳转tabbar页面

    uni.switchTab： 跳转列表不会刷新 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 uni.reLaunch： 跳转列表会刷新 关闭所有页面，打开到应用内的某个页面。（ 可以跳转到tabBar 页面 ） 但如果是列表的自定义表头有多个title的时候需要加参数才能返回到对应的列表 如下图所示

    2024年02月11日
    浏览(37)
  • uni-app教程一（项目创建、tabbar配置、运行

    uni-app教程一（项目创建、tabbar配置、运行

    导入静态资源包（图片） 页面tabbar配置 { “pages”: [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { “path”: “pages/index/index”, “style”: { “navigationBarTitleText”: “首页” } }, { “path”: “pages/news/news”, “style”: { “navigationBarTitleText”: “动态

    2024年04月23日
    浏览(25)
  • uni-app 实现凸起的 tabbar 底部导航栏

    uni-app 实现凸起的 tabbar 底部导航栏

    效果图 在 pages.json 中设置隐藏自带的 tabbar 导航栏 新建一个 custom-tabbar.vue 自定义组件页面 底部安全区域的适配问题可查看：uni-app 苹果手机底部安全区域的适配问题 在 main.js 中引用组件 在要用到的页面中直接调用

    2024年02月07日
    浏览(45)
  • uni-app 中两个系统各自显示不同的tabBar

    uni-app 中两个系统各自显示不同的tabBar

    最近在一个 uni-app 项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的 tabBar 页面,但是在 uni-app 项目中 pages.json 中的 tabBar 的 list 数组只有一个，且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义 tabBar 。 目录 1、我们确定在

    2024年04月13日
    浏览(39)
  • 解决uni-app小程序原生tabbar 添加阴影问题

    解决uni-app小程序原生tabbar 添加阴影问题

    下面是实现的效果  步骤1 创建一个组件  文件名和组件名要一致  步骤2  在组件中实现阴影效果 步骤3 在tabbar 页面使用  直接使用 即可 不用引入  

    2024年02月07日
    浏览(39)
  • uni-app前端H5页面底部内容被tabbar遮挡

    uni-app前端H5页面底部内容被tabbar遮挡

    在用uniapp写小程序的时候，底部有一部分内容没显示出来，被底部的tabbar遮挡住了 给最外部的view设置样式 padding-bottom: var(--window-bottom) ，如下 参考1 参考2 使用 uni-app 框架开发的一个项目，发现 H5 端页面底部的内容被导航栏（Tabbar）遮挡，小程序端可以正常显示。 查阅资料

    2024年02月04日
    浏览(46)
  • 微信小程序开发学习笔记《17》uni-app框架-tabBar

    微信小程序开发学习笔记《17》uni-app框架-tabBar

    博主正在学习微信小程序开发，希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 运行如下的命令，基于master分支在本地创建tabBar子分支，用来开发和tabBar相关的功能: 在 pages目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my)这4个

    2024年02月20日
    浏览(62)
  • uni-app的tabBar用法(自动、点击刷新页面，loading加载框)

    uni-app的tabBar用法(自动、点击刷新页面，loading加载框)

    一.先在package.json中配置tabBar（前置条件） tabBar所跳转的页面应事先在page中创建好！如下配置后app下方会有可点击的tabBar按钮，在list中设置按钮的个数。  图1         tabBar的 list 属性         text ：tabBar按钮的名称         pagePath ：tabBar按钮的page页面路径         iconPa

    2024年02月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包