前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986

效果图如下:



使用方法


// page.json 采用矢量图标设置返回箭头 ,{ "path" : "pages/Home/Home", "style" : { "navigationBarTitleText": "首页", "enablePullDownRefresh": false, "app-plus": { "titleNView": { "buttons": [{ "float": "left", "fontSize": "22px", "fontSrc": "/static/iconfont.ttf", // 字体文件 "text": "" // 字体图标\u 开头,加上字体图标unicode后面四位 } ] } } } } // 自定义导航栏高度 agentUserAgent() { var agent = navigator.userAgent; if (/iphone|ipad|ipod/i.test(agent)) { if (document.querySelector('.titleIos')) document.querySelector('.titleIos').style.display = 'block'; document.querySelector('.uni-page-head').style.paddingTop = '44px'; document.querySelector('.uni-page-head').style.height = '88px'; } },

HTML代码部分


<template> <view> <view class="content"> <!-- 适配iOS导航栏高度 --> <view class="titleIos"></view> 首页 <button style="margin-top: 20px;" @click="goBackIndex">返回index页面</button> </view> </view> </template>

JS代码 (引入组件 填充数据)


<script> export default { data() { return { } }, onReady() { // 自定义导航栏高度 this.agentUserAgent(); }, methods: { // 自定义导航栏高度 agentUserAgent() { var agent = navigator.userAgent; if (/iphone|ipad|ipod/i.test(agent)) { if (document.querySelector('.titleIos')) document.querySelector('.titleIos').style.display = 'block'; document.querySelector('.uni-page-head').style.paddingTop = '44px'; document.querySelector('.uni-page-head').style.height = '88px'; } }, // 返回菜单点击 onNavigationBarButtonTap(e) { if (e.index == 0) { uni.redirectTo({ url: '/pages/index/index' }) } }, goBackIndex() { uni.redirectTo({ url: '/pages/index/index' }) } } } </script>

CSS


<style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: yellowgreen; font-size: 26px; } </style>

前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标的更多相关文章

  1. 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况

    背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...

  2. 微信小程序自定义导航栏组件

    1.首先,要在json文件中设置为自定义的形式 "navigationStyle": "custom" 2.计算相关值 导航栏分为状态栏和标题栏,只要能算出每台 ...

  3. ios 自定义导航栏,开启侧滑返回手势

    自定义一个常用ListViewController .h文件 #import <UIKit/UIKit.h> @interface ListViewController : UIViewC ...

  4. 微信小程序自定义导航栏

    微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下: 1.在app.json的window属性中增加: navigationStyle:custom 顶部导航栏 ...

  5. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  6. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  7. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  8. Vue 如何实现一个底部导航栏组件

    参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...

  9. vue+vant-ui小程序,微信小程序自定义导航栏(适配刘海屏)

    整理一下微信小程序自定义导航栏和刘海屏适配问题 1.首先在根据官方文档,我们在小程序修改 app.json 中的 window 的属性 "navigationStyle": &qu ...

  10. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

随机推荐

  1. 【开源项目】合肥~超经典智慧城市CIM/BIM数字孪生可视化项目—开源工程及源码

    最新消息,数字孪生智慧宁波开源了其数据工程源码和工程,免费送出供大家学习.使用.分享. ​ 智慧宁波实现了一系列全面的功能,如实现长三角经济圈特效.智慧地铁特效.智慧灯杆特性等.这些项目利用数字孪生技 ...

  2. Linux磁盘LVM根目录扩容

    LVM 的基本概念 物理卷 Physical Volume (PV):可以在上面建立卷组的媒介,可以是硬盘分区,也可以是硬盘本身或者回环文件(loopback file).物理卷包括一个特殊的 hea ...

  3. Ubuntu 通过 Netplan 配置网络教程

    Ubuntu 通过 Netplan 配置网络教程 Ubuntu through Netplan configuration network tutorial 一.Netplan 配置流程 1. Net ...

  4. [AIGC]GPT模型概述

    2 Open AI: ChatGPT 2.0 ChatGPT 官网 https://openai.com/ https://platform.openai.com/ 原 : https://beta. ...

  5. 多态、抽象、Object类

    1.方法重写要求:方法名相同.参数类型相同.返回值相同或其子类返回值相同,子类修饰符要不小于父类 2.方法重载要求:方法名相同.参数类型不同.返回值没有改变.修饰符无关 3.多态的前提是继承.多态是定 ...

  6. Github 添加贪吃蛇动画

    前言 我们都知道,对于Github来说,当你选择你的账户时,可以看到自己的提交记录. 于是就有大神动脑筋了,这些commit记录都是一些豆,如果弄一条蛇来,不就可以搞个贪吃蛇了吗? 有道理有道理,本文 ...

  7. 机器学习(六):回归分析——鸢尾花多变量回归、逻辑回归三分类只用numpy,sigmoid、实现RANSAC 线性拟合

    [实验1 回归分析] 一. 预备知识 使用梯度下降法求解多变量回归问题 数据集 Iris 鸢尾花数据集是一个经典数据集,在统计学习和机器学习领域都经常被用作示例.数据集内包含 3 类共 150 条记录 ...

  8. springboot自动装配大概原理

    自动装配: pom.xml spring-boot-dependence:核心都依赖在父类工程中! 我们在写入或者引入springboot依赖的时候,不需要指定版,因为有这些仓库的版本 启动器:--- ...

  9. js计算当前时间差

    1 function timesFun(timesData) { 2 //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 3 var dateBegin = new Date(timesD ...

  10. MQTT.fx的安装和使用

    一.下载和安装 MQTT.fx支持Windows/Linux/Mac,附下载地址:http://www.jensd.de/apps/mqttfx/,下载完成之后双击进行安装. 二.配置使用 打开软件, ...