当前位置：首页 > web >正文

uniapp自定义导航栏,采用粘性定位

web 2025/6/22 1:13:26

1.使用自定义状态栏，在pages.json中设置

{"path": "pages/index/index","style": {"navigationStyle": "custom" //自定义导航栏}},

2.在app.vue中获取胶囊信息

<script setup lang="ts">import { useSystemStore } from "@/store/index";const systemStore = useSystemStore();import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";onLaunch(() => {let obj = uni.getMenuButtonBoundingClientRect()let { top, bottom, height } = objsystemStore.setMenuButtonBounding({ top, bottom, height })});onShow(() => {console.log("App Show");});onHide(() => {console.log("App Hide");});
</script>
<style lang="scss">/*每个页面公共css */page, .page-content{width: 100%;height: 100%;}@import "uview-plus/index.scss";
</style>

3.封装defaultNavbar.vue组件

<template><view class="page-content"><view class="pageTitle" :style="{ 'height': `${menuButtonBounding.bottom + 5}px`, 'position': 'relative' }"><view class="titleText":style="{ 'height': `${menuButtonBounding.height}px`, 'line-height': `${menuButtonBounding.height}px`, 'bottom': '5px', 'position': 'absolute', 'text-align': 'center' }"><view class="backIcon" @click="linkToBack"><i class="iconfont icon-fanhui zlcIcon"></i></view><view class="text">{{ props.pageTitle }}</view><view class="menuButton"></view></view></view></view>
</template><script setup lang="ts">import { defineProps } from "vue"import { useSystemStore } from "@/store/index";const systemStore = useSystemStore();//胶囊信息let { menuButtonBounding } = systemStoreinterface Props {pageTitle : string}//传递的页面标题const props = withDefaults(defineProps<Props>(), {pageTitle: '页面标题'})//返回上一页let linkToBack = () : void => {uni.navigateBack()}
</script><style lang="scss" scoped>@import url('@/iconfont/iconfont.css');.page-content {position: -webkit-sticky; /* Safari需要前缀 */position: sticky;z-index: 99;width: 100vw;height: fit-content;top: 0;background: linear-gradient(to bottom right, rgba(255, 252, 253, 1), rgba(255, 231, 237, 1), rgba(254, 252, 252, 1));.pageTitle {border-bottom: 1px solid #f8f2ff;.titleText {width: 100%;white-space: nowrap;display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;text-align: center;font-weight: bold;.backIcon {font-size: 30rpx;width: 40rpx;text-align: center;color: rgba(36, 37, 83, 1);}.text {color: rgba(36, 38, 81, 1);}.menuButton {width: 40rpx;}}}}
</style>