更换顶部导航的iconfont.ttf图标,先在配置文件配置好按钮:

pages.json文件

"buttons": [
{
"text": "\ue63d",
"fontSrc": "/static/iconfont.ttf",
"fontSize": "22px",
"color":"#fc455d",
"float":"left"
}
]

然后在当前的vue页面的生命周期里面获取到当前点击的按钮,把text里面的图标代码更改掉就可以了:

生命周期:

onNavigationBarButtonTap:function(btn){
if(btn.index == 0){
let pages = getCurrentPages();
let page = pages[pages.length - 1];
// #ifdef APP-PLUS
let currentWebview = page.$getAppWebview();
let titleObj = currentWebview.getStyle().titleNView;
console.log(1);
console.log(JSON.stringify(titleObj.buttons[0]));
if (!titleObj.buttons) {
return;
}
if(titleObj.buttons[0].text == '\ue63d'){
titleObj.buttons[0].text = "\ue602";
}else{
titleObj.buttons[0].text = "\ue63d";
}
currentWebview.setStyle({
titleNView: titleObj
});
// #endif
}

}

别忘了用// #endif 把判断结束

源码已全部贴出!!!

uni-app 顶部导航点击更换图标的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. android 点击桌面图标,打开手机浏览器进入对应的站点

    做一个假的adnroid app.要实现点击桌面图标.打开手机浏览器进入对应的站点,实现方法非常easy import android.app.Activity; import android.con ...

  3. [android] 新闻客户端实现左侧导航点击切换

    设置主布局文件,为根布局设置一个id,作为内容区 给ListView的条目设置点击事件,setOnItemClickListener()方法,参数:上下文 当前的Fragment实现OnItemCli ...

  4. nw打包vue项目exe更换图标

    web项目用nw打包好了之后发现没办法更换桌面显示图标问题,找了一下发现大多推荐Resource进行最后更换,试了第一次怎么也不管用,电脑重启了一下就行了...... 首先下载安装好了Resource ...

  5. 正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法

    正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法 例如:一个android程序包含两个Activity,分别为MainActivity和Other ...

  6. Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

    引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...

  7. thinkphp验证码点击更换js实现

    <img src="__CONTROLLER__/verify" alt="" onclick=this.src="__CONTROLLER__ ...

  8. PHP - 点击更换头像

    原理: 操作流程: 首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换. 效果: 主页面代码: <tr> <td>头像:</td> <td> ...

  9. zencart侧边导航点击一级目录展开二级目录

    [小 大] 2013-09-17 00:20 来源: 未知 作者:wtozz_admin 我要投稿 zencart侧边导航点击一级目录展开二级目录 zen cart Categories默认的是只显示 ...

随机推荐

  1. CentOS 7 用户及权限管理

    用户及组的管理: 安全上下文: 进程以其发起者的身份运行: 进程对文件的访问权限,取决于发起此进程的用户的权限 系统用户:为了能够让那些后台进程或服务类进程以非管理员的身份运行,通常需要为此创建多个普 ...

  2. 【396】python 递归练习题(COMP9021)

    Merging two strings into a third one Say that two strings s1 and s2 can be merged into a third strin ...

  3. 《Spring_four》团队作业4—基于原型的团队项目需求调研与分析

    (一)需求规格说明书github地址:https://github.com/gzyt/SRS (二)原型链接:http://www.cnblogs.com/lztxh/p/9011873.html ( ...

  4. C语言数据结构_严蔚敏+吴伟民 课本源码

    http://www.cnblogs.com/kangjianwei101/category/791617.html

  5. Adobe Flash player ActiveX下载地址

    http://www.adobe.com/support/flashplayer/downloads.html http://download.macromedia.com/pub/flashplay ...

  6. scikit_learn,NLTK导入分类器相关流程命令

  7. 用深信服AC控制方位话机注册链路的开、关

    1.话机正常配置:专线.互联网 配置: 抓包: 结论:话机走专线注册,正常. 2.在SANGFOR AC上阻断专线地址组(域名没有找到阻断方式),模拟专线断开的场景 1)nslookup解析出地址组 ...

  8. 一些matlab命令

    expand: R = exprnd(MU) returns an array of random numbers chosen from the exponential distribution w ...

  9. vue学习笔记(WebStorm安装)

    慕课网:https://www.imooc.com/video/18553 一.前往官网下载:https://www.jetbrains.com/webstorm/download/#section= ...

  10. 手机设备上touchstart与click的区别

    1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...