Vux使用笔记---ViewBox

最新推荐文章于 2025-06-02 09:03:20 发布

BennyShi98

最新推荐文章于 2025-06-02 09:03:20 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/BennyShi1998/article/details/81391516

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用ViewBox结合Tabbar组件实现在页面滚动时导航栏固定的效果。关键在于确保所有父级div的高度设置为100%，包括APP.vue的根div。通过这种方式，可以成功创建出导航栏始终可见、内容可滚动的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要使用ViewBox+Tabbar实现导航栏，同时导航栏保持不动，内容滚动。

可是按照ViewBox的例子折腾了很久都实现不了。

最后分析Vux整个项目得出结论，想要实现导航栏不动的效果，需要

view-box`所有父div`也需要为100%高度

重要的事情说三遍

所以，要把APP.Vue的根div也设置为100%高度就可以实现了~

<template>
  <div id="app" style="height:100%;">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
body {
  background-color: #fbf9fe;
}
</style>