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默认的是只显示 ...
随机推荐
- 使用memcached遇到的一些问题
1 .多台服务器时间不统一,引发缓存存取异常. 问题描述: 同一台memcache缓存服务器,比如memcache.server=192.168.88.51:11211 提供缓存服务: 项目部署到 ...
- lombok踩坑与思考
虽然接触到lombok已经有很长时间,但是大量使用lombok以减少代码编写还是在新团队编写新代码维护老代码中遇到的. 我个人并不主张使用lombok,其带来的代价足以抵消其便利,但是由于团队编码风格 ...
- 系统分析与设计个人作业:WordCount
本次作业gitee地址:https://gitee.com/ackary/WordCount 一.项目简介 1.基础功能 基础功能部分主要实现的功能是统计一个程序设计语言源文件的字符数.单词数.行数, ...
- 聊聊 HashMap
数据存储底层? 数据底层具体存储是一个Node<K,V> HashMap 是基于哈希来映射的,那当映射冲突时候怎么解决? 链地址,数组+链表 HashMap 什么时候扩容? 负载因子 lo ...
- python day07笔记总结
2019.4.4 S21 day07笔记总结 一.深浅拷贝 1.copy.copy() 浅拷贝 deep.copy() 深拷贝 2.一般情况 1.str/int/bool 是不可变类型 ...
- day50 盒子显隐2D形变
复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...
- Lombok快速入门
Lombok是简化开发的jar包 借用老师的图来说明
- iOS相关的ARM汇编
一.iOS汇编1.真机:arm64汇编寄存器指令 堆栈2.模拟器:x86汇编 二.lldb (lldb)register read x0 (lldb)register read w0 (lldb)re ...
- axios POST提交数据的三种请求方式写法
1.Content-Type: application/json import axios from 'axios' let data = {"code":"1234&q ...
- CSRedisCore 在net core中的使用
背景:与net core配套的StackExchange.Redis客户端总是间歇性的发生timeout异常. 由complexer单例对象创建的IDatabase对象,在产生Timeout异常后会导 ...