uni-app像小程序中的自定义头部（万能封住头部）

第一：先在Appvue中全局获取不同手机的顶部高度

在methods:{

getPhoneHeight(){

let that =this

unigetSystemInfo({

success:function(res){

thatglobalDataphoneHeight=resstatusBarHeight

}

})

}

}

第二步

在components中写公共组件

uni-topBarvue

<template>

<view class="nav-box" style="margin-top:{{phoneHeight}}px">

<view class='nav-top-one'>

<image src='/static/images/tbackpng' class="nav-top-left" @click="backpage"></image>

<view class="nav-top-center"></view>

<image src='/static/images/homepng' class="nav-top-right" @click="BackHome"></image>

</view>

<view class="nav-top-text">{{titleNameaddredd}}</view>

</view>

</template>

<script>

// app中的全局需要在每个页面进行引入

import app from '/Appvue'

export default {

//

name: "uniNavBar",

// 接受父组件的传值，可以接受多个中 在父组件中用v-bind 来绑定

props: {

// 接受父组件的传值

titleName: {

type: Object

}

},

data() {

return {

phoneHeight:appglobalDataphoneHeight //这里在进行调用

};

},

// 事件

methods: {

backpage() {

uninavigateBack({

delta: 1

});

},

BackHome(){

// 关闭当前页面

uniswitchTab({

url: '/pages/index/index'

});

}

},

// 生命周期

</script>

<style>

nav-box {

position:relative;

padding-left: 16rpx;

background:#ffffff;

height:76rpx;

</style>

第三步：

在需要的页面进行引入 和vue引入公共组件的方法一样

html:

<uniNavBar :titleName="topData"></uniNavBar>

js:

import uniNavBar from "///components/uni-nav-barvue"

components:{

uniNavBar

},

最后效果显示

悟空—不死谢谢

1、新建一个微信小程序0607，完成后，大致架构如图。

2、打开appjson，在其中配置topbar，如图，红色部分表示的代码；注意：绿色处的逗号，不可省略。

3、上图代码运行后，即可看到添加的底部导航，如图。

4、在appjson中，再添加一个导航test，需要添加两端代码，如图中的代码1和代码2，运行成功后，会在pages文件夹下出现test文件。

5、给添加图标，要使用 iconPath，selectedIconPath这两个属性。

6、运行后，出现底部导航图标，点击选中的显示√，如图。

7、如果不喜欢导航放在下面，可以改变position的值，将其放在最上端即可。

微信小程序只有底部 bar，无 顶部 bar，如果你一定要做，可以自己模拟一个，想实现真正的 topbar，只能是原生态 app，目前微信小程序 顶部能控制的有 标题，背景颜色，右端 分享 功能。

这句话的意思是给这个DIV定指定了三个样式，分别为：topbar-main、fn-clear、layout，你看一下，你的文件里应该会有一个扩展名为css的文件，里面就定义了这三个样式。

以上就是关于uni-app像小程序中的自定义头部（万能封住头部）全部的内容，包括:uni-app像小程序中的自定义头部（万能封住头部）、微信小程序底部导航图标如何设置大小、如何在微信小程序中实现今日头条App那样的Topbar等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！