更换顶部导航的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. 逻辑读为何消耗CPU?

    在数据库系统中,经常会看到这个说法:“逻辑读很消耗CPU”,然后开始把这句话当作一个定理来使用.但是为什么“同样是读,为什么逻辑读会使用那么多CPU?” 查了一些资料,配合自己的理解,有下面几点体会: ...

  2. html 自定义上传图片样式,并回显

    <div id="photoUpLoad"> <input type="file" id="photo" name=&qu ...

  3. 树的遍历——c#实现

    树作为一种重要的非线性数据结构,以分支关系定义其层次结构,在客观世界中应用广泛.通过对树遍历,将树进行线性化处理,即遍历的结果是将非线性结构的树种节点排列成一个线性序列.其中,最常见的遍历方式包括先序 ...

  4. Git安装配置和提交本地代码至Github,修改GitHub上显示的项目语言

    1. 下载安装git Windows版Git下载地址: https://gitforwindows.org/ 安装没有特别要求可以一路Next即可,安装完成后可以看到: 2. 创建本地代码仓库 打开G ...

  5. LINUX | 谷歌云开启SSH及设置root密码

    一.设置root密码 1.先选择从浏览器打开ssh连接服务器 2.切换到root账号 sudo -i 3.设置root密码 passwd 然后会要求输入新密码,然后再重复一次密码,输入密码的时候不会显 ...

  6. npm 离线安装依赖

    现实场景:一台自己的电脑可以连外网,一台开发机不能连网,开发机需要安装node_modules 依赖解决办法:       npm 安装依赖分为两种,一是 -g  这种是安装在全局环境的,只有在电脑中 ...

  7. Python开发【第十一篇】:Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 1.原生模块pymsql. 2.ORM框架SQLAchemy. pymsql pymsql是Python中操作MySQL的模块,其使用方法和MyS ...

  8. 通信导论-IP数据网络基础(1)

    TCP/IP封装过程: 端口号:服务器一般都是通过知名端口号(1~1023)来识别应用程序,(TCP)21.23.25,(UDP)53.69.161 TCP报文格式: 字节号:TCP把连接中发送的所有 ...

  9. 20-matlab全排列-函数调用

    matlab中global的用法 Matlab 中子函数不传参直接调用主函数global变量方法  在一个m文件里要调用一个函数(自定义的),但是我希望这个函数能利用并修改workspace中的变量( ...

  10. 将Windows系统移到另一个硬盘

    原先的128GB SSD,给Windows用是够了,最近虚拟机用得多,靠以前的SSD外挂着用,实在有点不爽,就入手一个256GB的,重装系统是个令人头疼的事情,当然不能干.想起来以前另一个机器操作的时 ...