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默认的是只显示 ...
随机推荐
- repo
repo init -b remoteBranchName repo sync repo start localBranchName --all 整体切分支 if error is tagger cl ...
- C语言典型编程1
关于C的一些小而精的编程,适合希望提升编程能力的初学者学习:关键编程也就几句,但思维可以迁移到其他编程语言.同一问题,算法多种 //阶乘运算(有多种编写方式,编程需要看懂,更要打出来)#include ...
- 2019 年 React 学习路线图(转)
转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框 ...
- phpstorm界面不停的indexing,不停的闪烁
选择 File->Invalidate Caches / Restart...->Invalidate and Restart,就行了!
- 第六周博客作业 <西北师范大学| 周安伟>
第六周博客作业 助教博客链接:https://home.cnblogs.com/u/zaw-315/ 本周工作:评阅作业24份点评困难的作业:无作业要求:https://www.cnblogs.com ...
- Mac/Linux 常用命令
一 mkdir 创建文件夹 mkdir myApp 在当前目录下创建myApp文件夹. mkdir -p /a/b/c 创建/a/b/c文件夹,如果/a或/a/b不存在,则自动创建. 二 touch ...
- Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- jmeter导入DB数据再优化
由于同一个迭代中每天都在执行.之前设计的思路是同个迭代只执行一次插入DB操作!! 因而没有在插入数据前没有做版本.产品类型.页面类型.接口名.接口名是否相等判断操作. 因此,若是这些条件相等,数据不是 ...
- js项目练习第二课
百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...
- Oracle 12c 创建新的数据库实例、用户
前提:安装好了Oracle 12c数据库,已有一个数据库实例xe,登录用户/密码:system/oralce 我用的是docker安装的Oracle 12c的实例: docker run --name ...