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默认的是只显示 ...
随机推荐
- MyEclipse和eclipse生成变量快捷键
MyEclipse和eclipse生成变量快捷键MyEclipse和eclipse生成变量快捷键 一.MyEclipse快捷生成变量(两种):第一种: 光标放在该行的任意位置,按 Ctrl+2,会弹出 ...
- [SF] Symfony 标准 HttpFoundation\Request 实现分析
使用方式 /** * 如果直接示例化 Request 默认是没有参数的,可以自己传入 * 本方法将 PHP 超全局变量作为参数然后实例化自身(Request)进行初始化. */ $request = ...
- html跳动的心实现代码
<style> .box{ width: 200px; height: 400px; positio ...
- infinite-loading 插件
<template> <div id="cart" class="has-top"> <!-- <v-header titl ...
- 解题(IdenticalTree--拓扑结构相同子树 )
题目描述 对于两棵彼此独立的二叉树A和B,请编写一个高效算法,检查A中是否存在一棵子树与B树的拓扑结构完全相同. 给定两棵二叉树的头结点A和B,请返回一个bool值,代表A中是否存在一棵同构于B的子树 ...
- [Solution] 893. Groups of Special-Equivalent Strings
Difficulty: Easy Problem You are given an array A of strings. Two strings S and T are special-equiva ...
- Angularjs 滚动条控制
控制滚动条 依赖 $location, $anchorScroll $scope.gotoTop = function () { $location.hash("top"); $a ...
- canel的网络策略
资源: https://docs.projectcalico.org/v3.2/getting-started/kubernetes/installation/flannel 基于pod Egress ...
- Hadoop环境搭建--Docker完全分布式部署Hadoop环境(菜鸟采坑吐血整理)
系统:Centos 7,内核版本3.10 本文介绍如何从0利用Docker搭建Hadoop环境,制作的镜像文件已经分享,也可以直接使用制作好的镜像文件. 一.宿主机准备工作 0.宿主机(Centos7 ...
- 再次认识void
重新认识void 在初学c/c++时感觉void是一个很不起眼的关键字.因为在c++中我使用的还是比较少的.但是到了Linux中,不论是在内核源码中还是在程序编写的过程中有关void与*的组合随处可见 ...