前端 vue 自定义导航栏组件高度及返回箭头 自定义 tabbar 图标

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦,其背后还有很多工作来支撑组件化的进行,例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的一款组件是:

前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 

阅读全文下载完整组件代码请关注微信公众号: 前端组件开发

 

d848d5658a07453c843277846948c608.png

效果图如下:

 

770a86b53d48384c5520e9868ef0b41f.png

08fa3eaa3712a8c466713be740d9b593.png

#

#### 使用方法

```使用方法

// 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代码部分

```html

<template>

<view>

<view class="content">

<!-- 适配iOS导航栏高度 -->

<view class="titleIos"></view>

首页

<button style="margin-top: 20px;" @click="goBackIndex">返回index页面</button>

</view>

</view>

</template>

```

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

```javascript

<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

```CSS

<style>

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

background: yellowgreen;

font-size: 26px;

}

</style>

```

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值