五种 自定义tabbar导航demo

已于 2023-05-08 09:42:05 修改
阅读量711 收藏 1
点赞数
分类专栏： 微信小程序 uniapp 文章标签： 微信小程序 前端 html5
于 2023-05-08 09:40:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenle_v/article/details/130533133
版权

使用场景：

例如：适用于app、微信小程序、H5的自定义底部导航 ，5种动态切换

问题描述

大部分小程序底部导航都是用原生的来写，但是如果遇到难缠的甲方，要各式各样的底部导航，这时候就不得不写自定义导航。但是 平时还是推荐用官方的底部导航，加载快，很少出bug，处理好的生命周期。

我这里是使用uniapp来写的，可以转任意app、微信小程序、H5端，讲一下基本逻辑。

项目结构分析:

在这里插入图片描述

第一步：

上面的是index.vue页面，用来引入5种底部导航， 根据tabBarType来切换不同的底部导航。
<template>
	<view>
		<!-- 翻滚效果 -->
		<view v-if="tabBarType == 1 ">
			<at-tab-roll :fixed-bottom="false"></at-tab-roll>
		</view>

		<!-- 凸起效果 -->
		<view v-if="tabBarType == 2 ">
			<at-tab-bulge :fixed-bottom="false"></at-tab-bulge>
		</view>

		<!-- 冒泡效果 -->
		<view v-if="tabBarType == 3 ">
			<at-tab-bubble :fixed-bottom="false"></at-tab-bubble>
		</view>

		<!-- 窗帘效果 -->
		<view v-if="tabBarType == 4 ">
			<at-tab-curtain :fixed-bottom="false"></at-tab-curtain>
		</view>

		<!-- 翻转效果 -->
		<view v-if="tabBarType == 5 ">
			<at-tab-overturn :fixed-bottom="false"></at-tab-overturn>
		</view>
	</view>
</template>

<script>
	import tabBarRoll from "../../components/at-tabBar/tab-bar-roll.vue" // 翻滚切换方式
	import tabBarBulge from "../../components/at-tabBar/tab-bar-bulge.vue" // 凸起切换方式
	import tabBarBubble from "../../components/at-tabBar/tab-bar-bubble.vue" // 冒泡切换方式
	import tabBarCurtain from "../../components/at-tabBar/tab-bar-curtain.vue" // 窗帘切换方式
	import tabBarOverturn from "../../components/at-tabBar/tab-bar-overturn.vue" // 翻转切换方式
	export default {
		components: {
			"at-tab-roll": tabBarRoll,
			"at-tab-bulge": tabBarBulge,
			"at-tab-bubble": tabBarBubble,
			"at-tab-curtain": tabBarCurtain,
			"at-tab-overturn": tabBarOverturn
		},
		data() {
			return {
				tabBarType: 1,  // tabbar类型依次是 (引入方式顺序)
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>

</style>

第二步：

每个导航里面引入自定义页面，每切换下面的导航index, 会显示不同的组件页面。
<template>
	<view class="">
		<!-- 各组件页面 -->
		<view class="module">
			<view :style="{ display: current == 0 ? 'block' : 'none' }">
				<at-page1 ref="page1"></at-page1>
			</view>
			<view :style="{ display: current == 1 ? 'block' : 'none' }">
				<at-page2 ref="page2"></at-page2>
			</view>
			<view :style="{ display: current == 2 ? 'block' : 'none' }">
				<at-page3 ref="page3"></at-page3>
			</view>
			<view :style="{ display: current == 3 ? 'flex' : 'none' }">
				<at-page4 ref="page4"></at-page4>
			</view>
			<view :style="{ display: current == 4 ? 'flex' : 'none' }">
				<at-page5 ref="page5"></at-page5>
			</view>
		</view>
		
		<!-- tabbar组件 -->
		<view class="at-tab-bar">
			<view class="placeholder" v-if="fixedBottom"></view>
			<view class="bar h-flex-x h-flex-5" :class="{'fixed':fixedBottom}">
				<view class="item" v-for="(item,index) in  tabList" :key="index" :class="{'active':current == index,'recover':prevIndex == index}" @tap="change(index)">
					<view>
						<view class="h-flex-x h-flex-center">
							<image style="width: 48rpx;height: 48rpx;" :src="item.icon" mode=""></image>
						</view>
						<view class="h-flex-x h-flex-center">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import atPage1 from '@/components/at-page/at-page1.vue';
	import atPage2 from '@/components/at-page/at-page2.vue';
	import atPage3 from '@/components/at-page/at-page3.vue';
	import atPage4 from '@/components/at-page/at-page4.vue';
	import atPage5 from '@/components/at-page/at-page5.vue';

	export default {
		// 翻滚切换方式
		name: "atTabBarRoll",
		props: {
			// 固定底部
			fixedBottom: {
				type: Boolean,
				default: true
			}
		},
		components: {
			"at-page1":atPage1,
			"at-page2":atPage2, 
			"at-page3":atPage3, 
			'at-page4':atPage4, 
			"at-page5":atPage5, 
		},
		data() {
			return {
				prevIndex: -1,
				current: 0,
				tabList: [{
						"icon": "../../static/tabbar/home_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "首页"
					},
					{
						"icon": "../../static/tabbar/order_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚1"
					},
					{
						"icon": "../../static/tabbar/order_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚2"
					},
					{
						"icon": "../../static/tabbar/store_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚3"
					},
					{
						"icon": "../../static/tabbar/my_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚4"
					},
				],
			};
		},
		methods: {
			change(index) {
				console.log(index);
				let that = this;
				if (that.current == index) return;
				that.prevIndex = that.current;
				that.current = index;
				
				if (that.current == 0) {
					that.$refs.page1.ontrueGetList();
				} else if (that.current == 1) {
					that.$refs.page2.ontrueGetList();
				} else if (that.current == 2) {
					that.$refs.page3.ontrueGetList();
				} else if (that.current == 3) {
					that.$refs.page4.ontrueGetList();
				} else if (that.current == 4) {
					that.$refs.page5.ontrueGetList();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./at-flex.scss";
	@import "./tab-bar.scss";
	
	.module{
		display: flex;
		align-items: center;
		justify-content: center;
		// background: pink;
	}
	.at-tab-bar {
		padding: 30rpx 0 0;
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #82a9f2;
		.item {
			height: 100rpx;
			position: relative;
			overflow: hidden;

			>view {
				height: 200%;

				>view {
					height: 50%;
					color: #0043e3;
					font-size: 30rpx;
				}
			}

			&.active {
				&::before {
					content: '';
					display: block;
					position: absolute;
					width: 90rpx;
					height: 90rpx;
					box-sizing: border-box;
					border-color: #0043e3;
					border-style: solid;
					border-width: 2px;
					border-radius: 50%;
					top: 5rpx;
					left: 50%;
					margin-left: -45rpx;
					z-index: 1;

					animation: scale 0.3s ease 0s 1 normal;
					animation-fill-mode: forwards;
				}

				&::after {
					content: '';
					display: block;
					background-color: #0043e3;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					position: absolute;
					bottom: 3px;
					left: 50%;
					margin-left: -2px;
					z-index: 2;
					opacity: 0;

					animation: fide-in 0.5s ease 0.3s 1 normal;
					animation-fill-mode: forwards;
				}

				>view {
					animation: translate 0.4s ease 0.3s 1 normal;
					// transform:translateY(-100rpx);
					animation-fill-mode: forwards;
				}
			}

			&.recover {
				>view {
					animation: recover 0.3s ease 0s 1 normal;
				}
			}
		}
	}

	// 恢复默认
	@keyframes recover {
		from {
			transform: translateY(-100rpx);
		}

		to {
			transform: translateY(0);
		}
	}

	// 转换移动
	@keyframes translate {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-100rpx);
		}
	}

	// 圆圈缩放
	@keyframes scale {
		0% {
			transform: scale(0, 0);
			opacity: 0;
			border-width: 2px;
		}

		50% {
			opacity: 0.5;
			border-width: 5px;
		}

		100% {
			transform: scale(0.95, 0.95);
			opacity: 0;
			border-width: 0px;
		}
	}

	// 淡入
	@keyframes fide-in {
		from {
			transform: scale(0, 0);
			opacity: 0;
		}

		to {
			transform: scale(1, 1);
			opacity: 1;
		}
	}
</style>

最后：

如果你看不太懂，没关系，附上个人gitee 项目地址: https://gitee.com/deer-stars/btm-seniorNavigation.git

如果文章对你帮助，请点个赞支持一下。

神乐233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义tabBar
qq_44173499的博客
02-26 1254
第一步：在page.json修改tabbar的配置 只保留页面路径， Markup "tabBar": { "color": "#7A7E83", "selectedColor": "#0A50DF", "borderStyle": "white", "backgroundColor": "red", "height":"0px", "custom": true, "list": [{ "pagePath": "pages/
小程序自定义tabbar—让你的小程序与众不同
weixin_57681196的博客
06-27 7358
本篇文章将详细介绍微信小程序自定义tabbar的设置方法和注意事项，希望能够帮助广大开发者更好地开发和设计自己的微信小程序，实现更加个性化和独特的用户体验。目录前言一、自定义tabbar设置的重要性二、怎么设置自定义tabbar呢第一步，配置信息第二步，添加tabBar代码文件第三步，编写tabBar代码第四步，使用tabBar三、注意事项🔥 发本文章由猿梦_小星原创📢 本文章主旨——讲解微信小程序自定义tabbar的设置方法和注意事项一、自定义tabbar设置的重要性。
微信小程序——自定义底部tabBar（以及解决图标点击两次才能选中状态）
最新发布
a13849911849的博客
04-22 758
微信小程序——自定义底部tabBar，自定义底部tabBar，自定义底部tabBar图标点击两次才能选中状态
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
热门推荐
一片天空
05-11 1万+
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
微信小程序 自定义导航栏navigationBar
油焖茄子 的博客
07-28 4071
除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。原生导航栏的标题文字的颜色只有黑白。布局无法改变，不能做定制。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle"："custom"，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
自定义底部tabbar
半梅芒果干的博客
12-01 213
因为小程序出的默认的tabbar无法自定义想要的样式，所以需要我们去写一个新的，但是我们自己写的每次页面切换时都出闪烁导致体验不是很好，所以再查找其他更好的tabbar方式时，发现微信小程序为我们可以自定义的文档，接下来就一起往下看吧！别人能做到的事,我们一定也能做到，加油！
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
小程序源码 自定义tabbar (代码+截图)
06-19
小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar ...
自定义凸起TabBar
07-09
自定义凸起TabBar，解决TabBar背景色，描边黑线问题，解决原生UITabBarItem覆盖在自定义TabBar上问题，解决凸起部分点击无响应问题github地址：https://github.com/zk1947/CustomTaBar博客：...
Flutter自定义TabBar的Indicator.zip
03-02
Flutter自定义TabBar的Indicator 实现秒杀Tab效果
小程序自定义tabbar
09-15
小程序自定义tabbar，覆盖默认tabbar，实现中间凸起功能和样式，包括html和js
小程序的自定义tabBar（底部导航栏）
stephenli300203的博客
04-12 2422
序言 最近做一个小程序的页面需要做底部导航栏，经过研究发现官方文档中给出了两种方法。 第一种可以说也是最简单的，就是自定义tabBar，使用的步骤可以按照官方文档进行。这篇文档就帮你快速写出一个自己的底部导航栏 自定义tabBar 1.配置信息 在app.json中tabBar项指定的custom字段，其余配置可按照文档进行配置 "tabBar": { "custom": true, ...
实现自定义的小程序底部tabbar
weixin_33919950的博客
07-06 723
————————2019/1/29 更新———————— 基础库2.5.0更新 支持自定义tabBar —————————穷———穷—————————— 背景 诶，当然是为了实现更有温度的代码啦（背后设计师拿着刀对着我） 自带tabbar app.json中配置： tabBar: { backgroundColor: '#fff',...
vue3 taro-ui-vue3 封装Tabbar组件
weixin_43761212的博客
03-25 3555
提示：使用 vant-weapp,Taro,vant-weapp,vue3 文章目录前言一、创建 Tabbar组件二、页面引入1.目录结构 前言 提示：请在 app.config.ts 文件内引入： usingComponents: { "van-button": "@vant/dist/button/index", "van-icon": "@vant/dist/icon/index", "van-tabbar": "@vant/dist/tabbar/index", .
关于微信小程序自定义导航栏时，如何获取手机状态栏和导航栏高度
thirteen_king13的博客
08-15 9870
在微信小程序中，自定义导航栏时，如和获取状态栏和导航栏的高度
自定义导航
Mr. Q
09-05 741
封装导航后，通过 Router 管理所有页面。格式：router.toXXX(params);import React , {Component} from 'react'; import { StyleSheet, PropTypes, View, Navigator } from 'react-native';import BackPress from './Ba
自定义Tabbar
weixin_43883776的博客
01-04 268
效果如下 直接上代码 // // LHTabbarButton.swift // safari // // Created by 磊怀王 on 2020/1/2. // Copyright © 2020 磊怀王. All rights reserved. // import UIKit class LHTabbarButton: NSObject { fun...
小程序自定义tabbar，不同用户显示不同页面
weixin_62374472的博客
07-06 3002
小程序自定义tabbar，不同用户显示不同页面
微信小程序——自定义底部tabBar
我是我
07-08 2524
在小程序开发时，在app.json中配置底部tabBar无法满足我现有的需求，所以准备自己定义一个tabBar. 1.app.json中配置 "tabBar": { "custom":true, // 支持自定义tabBar "list":[ // 至少包含两个tab信息 { "pagePath": "pages/staffs/staffs", "text": "机构", "iconPath": "./assets/commo
uniapp自定义tabbar导航栏
07-28
在uniapp中实现自定义tabbar导航栏的方法有多种。根据引用内容，可以看到有两种方法可以实现。 第一种方法是在父组件中引入tabbar组件，并在onLoad生命周期函数中隐藏原有的tabbar。然后在模板中使用tabbar组件，并通过routePath属性指定每个tab对应的页面路径。通过这种方式，可以实现自定义的底部导航栏。\[1\] 第二种方法是创建一个总页面Index，并在模板中引入自定义的tabbar组件。然后在总页面Index中引入自己写好的4个主页面（Home、Work、Message、My），并通过条件渲染的方式控制页面的切换。通过这种方式，可以实现自定义的底部导航栏。\[2\]\[3\] 以上是两种常见的实现自定义tabbar导航栏的方法，你可以根据自己的需求选择其中一种来实现。 #### 引用[.reference_title] - *1* [uniApp自定义tabBar导航](https://blog.csdn.net/qq_1307495/article/details/129584773)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uni-app中如何自定义实现tabbar导航栏](https://blog.csdn.net/weixin_70811193/article/details/127946635)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值