uni-app 顶部导航点击更换图标
更换顶部导航的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 顶部导航点击更换图标的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- android 点击桌面图标,打开手机浏览器进入对应的站点
做一个假的adnroid app.要实现点击桌面图标.打开手机浏览器进入对应的站点,实现方法非常easy import android.app.Activity; import android.con ...
- [android] 新闻客户端实现左侧导航点击切换
设置主布局文件,为根布局设置一个id,作为内容区 给ListView的条目设置点击事件,setOnItemClickListener()方法,参数:上下文 当前的Fragment实现OnItemCli ...
- nw打包vue项目exe更换图标
web项目用nw打包好了之后发现没办法更换桌面显示图标问题,找了一下发现大多推荐Resource进行最后更换,试了第一次怎么也不管用,电脑重启了一下就行了...... 首先下载安装好了Resource ...
- 正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法
正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法 例如:一个android程序包含两个Activity,分别为MainActivity和Other ...
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
引入步骤: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></scrip ...
- thinkphp验证码点击更换js实现
<img src="__CONTROLLER__/verify" alt="" onclick=this.src="__CONTROLLER__ ...
- PHP - 点击更换头像
原理: 操作流程: 首先点击头像图片,弹出选择窗口,选中其中一个则窗口推出头像更换. 效果: 主页面代码: <tr> <td>头像:</td> <td> ...
- zencart侧边导航点击一级目录展开二级目录
[小 大] 2013-09-17 00:20 来源: 未知 作者:wtozz_admin 我要投稿 zencart侧边导航点击一级目录展开二级目录 zen cart Categories默认的是只显示 ...
随机推荐
- CentOS 7 用户及权限管理
用户及组的管理: 安全上下文: 进程以其发起者的身份运行: 进程对文件的访问权限,取决于发起此进程的用户的权限 系统用户:为了能够让那些后台进程或服务类进程以非管理员的身份运行,通常需要为此创建多个普 ...
- 【396】python 递归练习题(COMP9021)
Merging two strings into a third one Say that two strings s1 and s2 can be merged into a third strin ...
- 《Spring_four》团队作业4—基于原型的团队项目需求调研与分析
(一)需求规格说明书github地址:https://github.com/gzyt/SRS (二)原型链接:http://www.cnblogs.com/lztxh/p/9011873.html ( ...
- C语言数据结构_严蔚敏+吴伟民 课本源码
http://www.cnblogs.com/kangjianwei101/category/791617.html
- Adobe Flash player ActiveX下载地址
http://www.adobe.com/support/flashplayer/downloads.html http://download.macromedia.com/pub/flashplay ...
- scikit_learn,NLTK导入分类器相关流程命令
- 用深信服AC控制方位话机注册链路的开、关
1.话机正常配置:专线.互联网 配置: 抓包: 结论:话机走专线注册,正常. 2.在SANGFOR AC上阻断专线地址组(域名没有找到阻断方式),模拟专线断开的场景 1)nslookup解析出地址组 ...
- 一些matlab命令
expand: R = exprnd(MU) returns an array of random numbers chosen from the exponential distribution w ...
- vue学习笔记(WebStorm安装)
慕课网:https://www.imooc.com/video/18553 一.前往官网下载:https://www.jetbrains.com/webstorm/download/#section= ...
- 手机设备上touchstart与click的区别
1.基本定义 touchstart 手指触碰开始就能触发 click 1.手指触碰 2.手指未在屏幕上移动 3.在这个dom上手指离开屏幕 4.触摸和离开屏幕之间的时间间隔较短 因此,click事件有 ...