【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入

这篇具有很好参考价值的文章主要介绍了【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

顶部导航栏和底部导航栏设置

在正式开发小程序的功能之前,首先需要确定小程序的主要框架。

创建几个需要底部导航栏切换的页面

我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”,“首页”已经存在于项目中,不需要重复创建。创建过程如下:

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
创建成功,不仅创建了star.vueHbuilder还自动帮助创建了star文件夹

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
除此之外,还帮助我们在pages.json文件中进行了配置

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
同理,继续创建其他文件

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

使用阿里巴巴矢量图标库

官网:阿里巴巴矢量图标库

首先注册账号并登录,然后点击我的项目
【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
创建一个新项目

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
搜索图标添加到项目中

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
将想要的图标添加到购物车中

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
查看购物车

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
将购物车的图标添加到项目中

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
下载项目的图标到本地

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
将下载的文件解压之后,把里面的.ttf文件拿出来

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
将ttf文件存储到项目的静态资源目录下面

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
在项目中使用

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

	"tabBar": {
		"iconfontSrc": "static/icon/iconfont.ttf",
		"color": "#333",
		"selectedColor": "#2b92ff",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconfont": {
					"text": "\ue67e",
					"selectedText": "\ue67e"
				}
			},{
				"text": "我想要",
				"pagePath": "pages/star/star"
			},{
				"text": "消息",
				"pagePath": "pages/message/message"
			},{
				"text": "我的",
				"pagePath": "pages/my/my"
			}
		]
	}

运行到浏览器中,查看网页效果,图标正常

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
运行到小程序中,查看效果,非常伤心,并不能正常使用

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
虽然在tabBar中无法使用iconfont,但是在页面的其他地方还是可以使用的,请继续后面的操作

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
将复制的在线代码替换掉原有的代码,下图是替换前

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
下图是替换后

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏之后,在每个链接前面添加上https

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
最后在App.vue文件中引入iconfont.css

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
到这里已经大功告成了,可以使用了,想要使用哪个图标,先去复制图标的unicode,如下图

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
在页面中使用

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
显示成功

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

完成底部导航栏tabBar

非常遗憾,上面引入的iconfont没办法再tabBar中使用,只能先把图标下载下来,然后再引入了

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
将下载的图标文件放入到项目的静态文件下面

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏
使用图标

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

"tabBar": {
		"color": "#333",
		"selectedColor": "#2b92ff",
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/icon/tabBar/首页.png",
				"selectedIconPath": "static/icon/tabBar/首页.png"
			},{
				"text": "我想要",
				"pagePath": "pages/star/star",
				"iconPath": "static/icon/tabBar/收藏.png",
				"selectedIconPath": "static/icon/tabBar/收藏.png"
			},{
				"text": "消息",
				"pagePath": "pages/message/message",
				"iconPath": "static/icon/tabBar/消息.png",
				"selectedIconPath": "static/icon/tabBar/消息.png"
			},{
				"text": "我的",
				"pagePath": "pages/my/my",
				"iconPath": "static/icon/tabBar/我的.png",
				"selectedIconPath": "static/icon/tabBar/我的.png"
			}
		]
	}
  • iconPath:未选中状态的图标
  • selectedIconPath:选中之后的图标

我这边为了偷懒,未选中和选中状态都使用相同的图标,你们可以使用不同的图标。

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

设置页面顶部导航栏标题

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

  • navigationBarTitleText:导航的标题
  • enablePullDownRefresh:页面是否允许下拉刷新
    【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

样式优化

{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages

		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": true,
				// 设置背景颜色
				"navigationBarBackgroundColor": "#2b92ff",
				// 设置标题的颜色
				"navigationBarTextStyle": "white"
			}
		}, {
			"path": "pages/star/star",
			"style": {
				"navigationBarTitleText": "我想要",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#2b92ff",
				"navigationBarTextStyle": "white"
			}

		}, {
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#2b92ff",
				"navigationBarTextStyle": "white"
			}

		}, {
			"path": "pages/message/message",
			"style": {
				"navigationBarTitleText": "消息",
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#2b92ff",
				"navigationBarTextStyle": "white"
			}

		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"color": "#292929",
		"selectedColor": "#2b92ff",
		"backgroundColor": "#ffffff",
		"list": [{
			"text": "首页",
			"pagePath": "pages/index/index",
			"iconPath": "static/icon/tabBar/首页.png",
			"selectedIconPath": "static/icon/tabBar/首页 (1).png"
		}, {
			"text": "我想要",
			"pagePath": "pages/star/star",
			"iconPath": "static/icon/tabBar/收藏.png",
			"selectedIconPath": "static/icon/tabBar/收藏 (1).png"
		}, {
			"text": "消息",
			"pagePath": "pages/message/message",
			"iconPath": "static/icon/tabBar/消息.png",
			"selectedIconPath": "static/icon/tabBar/消息 (1).png"
		}, {
			"text": "我的",
			"pagePath": "pages/my/my",
			"iconPath": "static/icon/tabBar/我的.png",
			"selectedIconPath": "static/icon/tabBar/我的 (1).png"
		}]
	}
}

【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入,小程序开发,uni-app,小程序,apache,导航栏

同项目其他文章

该项目的其他文章请查看【易售小程序项目】项目介绍、小程序页面展示与系列文章集合文章来源地址https://www.toymoban.com/news/detail-569193.html

到了这里,关于【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

  • 小程序开发实战案例之三 | 小程序底部导航栏如何设置

    小程序中最常见的功能就是底部导航栏了,今天就来看一下怎么设置一个好看的导航栏~这里我们使用的是支付宝官方小程序 IDE 做示范。   一般的小程序会有四个 tab,我们这次也是配置四个 tab 的导航栏。 首先,我们先创建四个页面:   tab 最多可以设置五个,参考 👉

    2024年02月05日
    浏览(63)
  • uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现

            先看效果是否可以满足你们,如果可以满足你只要一步一步照着做绝对没有错。         本人技术不佳,研究了一整天,全网的大佬们写的博客看的晕头转向,避免大伙再走弯路,跟着我以下步骤一点一点来绝对可以实现。         最终效果图: (如果你

    2024年02月04日
    浏览(51)
  • 微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

    dai ga hou啊!我是 😘😘😘 是江迪呀 。我们在进行微信小程序开发时,常常需要自定义一些东西,比如 自定义顶部导航 、 自定义底部导航 等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型,来给大家介绍下 微信

    2024年02月02日
    浏览(58)
  • uniapp 设置底部导航栏

    uniapp 设置原生 tabBar 底部导航栏。 一、创建页面,一定要在 pages.json 文件中注册。  二、在 pages.json 文件中,设置 tabBar 配置项。 效果: 注 :在 list 中最少配置 2 个页面,最多 5 个页面,另外不能使用网络图片。 一、在任意页面中,调用 uni.setTabBadge 方法,设置指定页面的

    2024年02月01日
    浏览(34)
  • uniapp 开发小程序之实现不同身份展示不同的 tabbar(底部导航栏),附带相关问题解答

    效果展示:   引言 在开发过程中逐渐意识到uniapp原生的tabbar可能不能满足开发要求,通过浏览博客才选择使用uView的Tabbar 底部导航栏来实现,我选择用的是2X版本 安装 我是使用Hbuilder插件的方式引入的组件库,安装配置可以看这篇: 下载安装方式配置 | uView 2.0 - 全面兼容

    2024年02月11日
    浏览(41)
  • uniapp开发小程序,设置iphone底部安全区域

    上面dom结构的,根据需求是这样的:整个屏幕被两个view占满,其中底部view是固定在底部不动的,content内容立马是高度盛满剩下屏幕高度,并且overflow:scorll ; safeArea里面的动态样式中的safeAreaBottom是vuex保存的值,后面加的114,是底部高度再略高一点:“100+14” ,其中14你给

    2024年02月12日
    浏览(57)
  • 在uniapp中获取微信小程序状态栏和导航栏的高度

    在微信小程序中,可以使用  uni.getSystemInfo()  方法获取设备的系统信息,包括状态栏的高度和顶部导航栏的高度。您可以使用这些信息计算顶部图标距离。 下面是一个示例代码,展示如何在 UniApp 中获取顶部图标距离: 在上述示例代码中,我们通过调用  uni.getSystemInfo()  方

    2024年02月07日
    浏览(47)
  • 【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点

    功能描述:无论点击底部的哪个菜单栏,都可以看到第二个菜单栏下显示的红点通知。 如果只在人脉当前页面设置的话,当你在第二个菜单栏的页面中调用 uni.setTabBarBadge 方法设置红点后,切换到第一个菜单栏的页面时,是无法看到第二个菜单栏的红点的。 解决方法:如果希

    2024年02月12日
    浏览(46)
  • uniapp小程序自定义顶部导航栏高度适配

    目录 自定义导航栏介绍: 自定义导航栏的使用 step1:取消默认的原生导航栏 step2:在页面中添加占位元素 自定义导航栏介绍:         一般用于图片等的填充或者其他特殊需求,如果使用纯色填充顶部栏可以直接使用navigationBarBackgroundColor完成 page.json文件: 效果: 自定义

    2024年02月11日
    浏览(44)
  • uniapp 小程序自定义导航栏计算状态栏(顶部)与导航栏(胶囊)高度

    uni.getMenuButtonBoundingClientRect() 参考链接 uni.getSystemInfo()参考链接

    2024年02月11日
    浏览(74)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包