uniapp添加顶部导航栏并且更换图标

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。

开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

记录一下更换顶部导航栏的流程

在page.json里的配置项

{"path": "pages/my/index","style": {"app-plus": {"titleNView": {"buttons": [{"text": "\ue605","fontSrc": "/static/iconfont.ttf","fontSize": "22px","float": "left"//显示在左侧},{"text": "\ue606","fontSrc": "/static/iconfont.ttf","fontSize": "22px"}]}}}},

更换图标
1.在阿里巴巴矢量图选择自己喜欢的图标，然后点击收藏

2.右上角下载全部已经收藏了的图标

3.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码

4.最后把对应图标的编码填写到page.json的配置项里text，需要写成一个"\u***"，然后重启就实现了

5.最后在对应的页面生命周期方法里填写，通过e.index，来配置不同的方法

        onNavigationBarButtonTap:function(e){console.log(JSON.stringify(e))},

作者：浩浩浩浩浩浩荡
链接：https://www.jianshu.com/p/5347eabff1e4
来源：简书

uniapp添加顶部导航栏并且更换图标相关推荐

uniapp添加顶部导航栏并且使用iconfont图标
一.在阿里矢量图选择自己喜欢的图标,然后点击收藏二.右上角下载全部已经收藏了的图标代码三.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目static文件夹里,然后再打开ic ...
uniapp添加顶部导航栏颜色渐变
在uniapp文件夹的pages.json文件中添加如下代码即可实现 "backgroundImage":"linear-gradient(to right, #FFDE ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
uniapp实现顶部导航栏背景图片渐隐渐现效果
由于项目需要一个功能,顶部距离小于50rpx时,导航栏透明显示:当滚动页面时,导航栏不再透明显示. 实现思路: 如果滑动位置距离顶部<=50的话,隐藏导航栏: 50 < 距离顶部距离 &l ...
uni-app隐藏顶部导航栏
1.单个页面隐藏 1.1 在在pages.json里配置 "navigationStyle": "custom" {"path": &quo ...
Uniapp设置顶部导航栏隐藏
在pages.json中设置以下代码: "app-plus": {"titleNView": false //禁用原生导航栏 }
vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换
layout-------------模板包含菜单栏等主要框架 router--------------路由管理,根据路由可生成左侧菜单栏 /** When your routing table is ...
uniapp 动态控制顶部导航栏显隐，控制右上角按钮隐藏 app
//设置页面全屏 onShow() {this.initAluminumLiquidCodeList();this.handleInit();// #ifdef APP-PLUSplus.naviga ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...

uniapp添加顶部导航栏并且更换图标

uniapp添加顶部导航栏并且更换图标相关推荐

最新文章

热门文章