更换顶部导航的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. numpy统计分布显示

    #导包 import numpy as np #导入鸢尾花数据 from sklearn.datasets import load_iris data = load_iris() pental_len ...

  2. SQL Server并发操作单个表时发生在page页面级的死锁

    最近遇到的死锁问题都发生在并发操作单张表上,比较有意思,就模拟了重现了一下.根据非聚集索引为条件,删除某一个表的数据,类似于这么一个语句,delete from table where noclust ...

  3. 模仿input闪烁光标

    模仿闪烁的光标 <span class="cursor-blink"> </span> 样式代码: .cursor-blink { display: inl ...

  4. Taro开发写密码支付弹层

    在支付的时候弹出填写密码,模仿了支付宝支付填写密码.主要是利用遮罩的来实现.直接上代码吧. html设计,通过标记控制显示. { showPayPwdInput ? <View classNam ...

  5. less,more,view一个文件时中文可以正常显示,可是VI却显示乱码呢?

    https://blog.csdn.net/konglongaa/article/details/80590470 登陆后输入export LC_ALL="zh_CN.GB2312" ...

  6. 既然还看不到未来之光,那就从骄阳开始的地方--IT携行

    对于还没真正踏入IT的小白菜来说,哪有资格把刚学到的鸡毛蒜皮儿,三脚猫都不算的东西逮出来献丑,献丑都不算,还不如我们来谈谈人生,练练脸皮...... 我出发的起点肯定不同,多方限制,可能缺乏时光;那正 ...

  7. C# 木马功能的简单实现

    1.首先解决开机启动木马.通过建立开机启动服务达到目的:2.伪装问题.通过c#反射性能,将正常的.net的exe文件添加监控盗传播取等其他功能,执行正常程序同时,后台悄悄释放windows服务,通过服 ...

  8. antd-react-mobile(踩坑记录)

    1.按照官网步骤进行, $ npm install -g create-react-app # 注意:工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试 ...

  9. systemverilog soft constraint

    1.class my_item; rand bit constrainted_random; rand bit usually_one; endclass class my_generator; my ...

  10. XML字符串转为Map

    import java.io.ByteArrayInputStream; import java.io.UnsupportedEncodingException;import java.util.Ha ...