更换顶部导航的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. python视频学习笔记2(if)

    一.if语句1.比较运算符,if语句语法 # 1. 输入用户年龄# 2. 判断是否满 18 岁 (**>=**)# 3. 如果满 18 岁,允许进网吧嗨皮# 4. 如果未满 18 岁,提示回家写 ...

  2. linux上如何设置网络,出现connect: network is unreachable 的问题。

    发现有网友问有关ping命令出现connect: network is unreachable 的问题. 这通常是因为没正确设置ip地址. 解决方法: 在确保完善网卡驱动,以及确保将网卡驱动编译进内核 ...

  3. linux dd 本地挂载

    losetup /dev/loop0 /root/test.img mkfs.ext4 /dev/loop0 mount /dev/loop0 /data

  4. mybatisplus打印sql语句

    package com.osplat.config; import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor; ...

  5. svn仓库迁移

    注意事项 1.仅迁移代码.日志.版本信息,(用户.权限.配置即conf目录需要手动移动或重新配置) 2.新仓库需无代码,即新建仓库后不要进行上传操作,否则迁移可能造成冲突,导致迁移失败 操作步骤 1. ...

  6. Java框架spring 学习笔记(三):Bean 的生命周期

    当一个 bean 被实例化时,它可能需要执行一些初始化使它转换成可用状态.当bean不再需要,并且从容器中移除时,需要做一些清除工作.为了定义安装和拆卸一个 bean,我们只要声明init-metho ...

  7. Java中代理

    普通代理(最简单的代理) 需要有两个实现同一个接口的类,一个是被代理的类,一个是代理类 被代理类中我们按照自己想实现的功能重写接口中的方法 代理类中因为需要代理被代理类,所以在代理类中需要有个被代理类 ...

  8. Windows防火墙开启ping,禁ping的配置方法

    Windows 7,Win 2008 R2,2012 R2: Windows防火墙 --> 高级设置 --> 入站规则 --> 在列表里找到“文件和打印机共享(回显请求 - ICMP ...

  9. 安卓学习 Drawable对象

    whie(!images[currentImage].endWith(".PNG")&&!images[currentImage].endWith(".p ...

  10. 网址导航18B

    [名站] 百度 网易 腾讯 新华 中新 凤凰 [新闻] 联合早报  南方周末  澎湃新闻 [系统] 宋永志 蒲公英 技术员 秋叶系统 装机网 系统之家 [软件] 星愿浏览器 暴风激活 贱人工具箱 微P ...