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

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

“`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>

“`