vue+vant 获取导航栏高度

// 获取导航栏高度
export default function () { 
  const height = ref(46)

  onMounted(() => {
    const vnbp = document.getElementsByClassName('van-nav-bar__placeholder')[0]
    vnbp?.clientHeight && (height.value = vnbp?.clientHeight)
  })

  return {
    height
  }
}

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对你的问题,我可以给你一些思路和建议。首先,我们需要明确一下问题的背景和需求: 1. 多页面:指的是我们的项目中有多个页面,而不是单页应用(SPA)。 2. 共用底部导航栏:指的是我们需要在每个页面中都展示同一个底部导航栏,这个导航栏通常被称为 Tabbar。 基于以上需求,我们可以考虑使用 Vue.jsVant UI 组件库来实现多页面共用底部导航栏。具体实现步骤如下: 1. 创建多个页面:在项目中创建多个页面,每个页面对应一个路由。这些页面可以是纯 HTML 页面,也可以是基于 Vue.js 框架开发的页面。 2. 定义底部导航栏组件:在 Vant UI 组件库中提供了 Tabbar 组件,我们可以使用这个组件来实现底部导航栏。在 Vue.js 中定义一个底部导航栏组件,将 Tabbar 组件作为该组件的一部分。 3. 在路由中引入底部导航栏组件:在每个页面的路由中引入底部导航栏组件,并将组件渲染在页面的底部。这样每个页面就都会展示同一个底部导航栏。 4. 处理底部导航栏的选中状态:由于底部导航栏是共用的,所以需要在不同的页面中处理导航栏的选中状态。我们可以通过路由的钩子函数来实现这一功能。比如在路由的 beforeEach 钩子函数中,根据当前路由的 path 来设置导航栏的选中状态。 以上就是实现多页面共用底部导航栏的大致思路和步骤。当然,具体的实现可能还需要根据项目的具体需求进行一些调整和优化。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值