uniapp小程序配置tabbar底部导航栏实战指南

目录
  • 前言:
  • 正文
    • Tips
    • 1、首先我们准备好自己项目所需要的tab图标
    • 2、找到我们的pages.json文件进行配置
    • 3、配置一下导航栏标题内容
    • 4、来看看我们的成果(效果图)
  • 总结

前言:

配置底部导航栏首先需要大家准备好自己想要使用的图标,每个tab可以选择两个图标,分别为选中前的和选中后的。之后我们根据uniapp官网提供的

uniapp官网tabbar配置项,话不多说直接上正文一起来学习一下如何配置底部导航栏吧。

正文

首先我们先看一下官网中的介绍:
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。

Tips

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个loading。
  • tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。

1、首先我们准备好自己项目所需要的tab图标

我这里准备了6张,分别用于3个tab切换使用(选中前和选中后的,放在了static文件夹下的tabbar文件夹下:

2、找到我们的pages.json文件进行配置

找到globalStyle位置,在它的下方配置我们的tabbar。

代码片段如下:

// 配置tabbar导航栏
	"tabBar": {
		"borderStyle": "black",
		"selectedColor": "#FB7299",
		"color": "#444444",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/find.png",
				"selectedIconPath": "static/tabbar/find-selected.png",
				"text": "发现"
			},{
				"pagePath": "pages/cate/cate",
				"iconPath": "static/tabbar/cate.png",
				"selectedIconPath": "static/tabbar/cate-selected.png",
				"text": "分类"
			},{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/tabbar/my.png",
				"selectedIconPath": "static/tabbar/my-selected.png",
				"text": "我的"
			}
		]
	}

相信很多小伙伴不知道这些配置项都是什么意思,如下附上一张官网的配置项截图,大家也可以从前言内容中链接去官网自查。(本案例中使用的是一些最基础的属性。)

3、配置一下导航栏标题内容

官网地址给小伙伴们

导航栏标题内容是我们页面顶部位置的如下图所示:

代码示例如下所示:(本人用的一些常见的配置项,可自行修改)

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "配置底部导航栏"
			}
		}
	    ,{
            "path" : "pages/mine/mine",
            "style" :
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }

        },
		{
		    "path" : "pages/cate/cate",
		    "style" :
		    {
				// 导航栏标题文字内容
		        "navigationBarTitleText": "分类",
				// 是否开启下拉刷新
		        "enablePullDownRefresh": false
		    }

		}
    ],
	// 默认页面的样式
	"globalStyle": {
		// 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
		"navigationBarTextStyle": "black",
		// 导航栏标题文字内容
		"navigationBarTitleText": "配置底部导航栏",
		// 导航栏背景颜色(同状态栏背景色)
		"navigationBarBackgroundColor": "#55aaff",
		// 下拉显示出来的窗口的背景色
		"backgroundColor": "#ffff7f"
	}

一些配置项的含义我都写了注释,小伙伴可以自己看看。

4、来看看我们的成果(效果图)

总结

到此这篇关于uniapp小程序配置tabbar底部导航栏的文章就介绍到这了,更多相关uniapp配置tabbar底部导航栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-09-12

uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

目录 需求 实现原理 实现 总结 需求 分包中如果有6个页面A B C D E F,这6个页面可以作为tabbar页面进行展示,具体配置通过后台接口返回(页面数量限制依然存在 2 - 5),比如后台配置A B C D E这个5个页面为tabbar页面,那么A B C D E将作为tab页展示,跳转方式也是tab方式跳转,跳转到F页面为普通navigate跳转.这将解决 多商家底部tab配置问题,可以让商家自己配置小程序tab页的展示模式. 实现原理 1.自定义底部导航,数据通过接口获取 2.将需

微信小程序官方动态自定义底部tabBar的例子

最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的.在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动:2.是利用小程序的组件开发:但是项目已经进行了一般,不可能再进行大的改变: 怎么办呢?? 无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接. 先看效果图: 1.首先看一下官方用法 这是几个非常重要你需要

微信小程序 底部导航栏目开发资料

微信小程序 底部导航栏目开发 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮 在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 将上述起好名字的图标 保存到 小程序

微信小程序 JS动态修改样式的实现代码

微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="

微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;" >我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view> <inpu

微信小程序实现动态设置页面标题的方法【附源码下载】

本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button&g

微信小程序实现动态获取元素宽高的方法分析

本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1.  obj.in(co

微信小程序实现动态列表项的顺序加载动画

本文实例为大家分享了微信小程序实现动态列表项的顺序加载动画,供大家参考,具体内容如下 效果  思路 1.最开始用了纯CSS动画animation,发现动画需要重复写,于是换使用transition动画. 2.使用onReady()可以让页面加载好再显示动画以免动画提前结束. 代码 wxml <!-- style中的主要为了区分已加载好的项和新数据,只有新数据有动画 --> <view wx:for="{{lists}}" class="common"

操作按钮悬浮固定在微信小程序底部的实现代码

本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单,还不会的朋友一起跟着小编学习一下吧,希望对你们有所帮助. 常见的有加入购物车按钮.结算按钮.收货列表添加地址按钮. 以收货地址为例,将添加地址按钮悬浮于最底部,这样再多的地址,也不会被遮挡而看不见. 核心代码如下: 添加 /*添加地址按钮*/ .address-add { position: fixed; bottom: 0; width: 100%; } 改用position: fixed之后,其中width需要设置为

uni-app微信小程序登录并使用vuex存储登录状态的思路详解

微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

微信小程序 JS动态修改样式的实现方法

前言 本文主要介绍了关于微信小程序 JS动态修改样式的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 先写一个不怎么好看的demo,通过点击事件来控制view的元素属性,把背景改变成蓝色. 是这样的效果: 代码如下: 上一份小代码 index.wxml <view > <view class="cont" style="background:{{background}};">属性改变</view> <