如何在微信小程序中实现今日头条App那样的Topbar

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

第一：先在App.vue中全局获取不同手机的轮码顶部高度

在methods:{

getPhoneHeight(){

let that =this

uni.getSystemInfo({

success:function(res){

that.globalData.phoneHeight=res.statusBarHeight

}

})

}

}

第二步

在components中写公共组件

uni-topBar.vue

<template>

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

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

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

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

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

</view>

<view class="nav-top-text">{{titleName.addredd}}</view>

</view>

</template>

<script>

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

import app from '../App.vue'

export default {

//

name: "uniNavBar",

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

props: {

// 接受父组件的传值

titleName: {

type: Object

}

},

data() {

return {

phoneHeight:app.globalData.phoneHeight //这里在进行调用

}

},

// 事件嫌谈

methods: {

backpage() {

uni.navigateBack({

delta: 1

})

},

BackHome(){

// 关闭当前页面

uni.switchTab({

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-bar.vue"

components:{

uniNavBar

},

最后效果显示

悟空—不死谢谢

---