本文主要是介绍uniapp使用vue3语法构建自定义导航栏，适配小程序胶囊，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
具体代码
<view v-if="isCustom" class="nav-content-container" :style="'height:'+navContentHeight +'px;'"><slot name="left"></slot><slot name="middle"> </slot><view :style="'width:'+navPaddingRight+'px;'+'height:40px'"></view></view><view v-else class="nav-content-container" :style="'height:'+navContentHeight +'px;'"><image v-if="!isInTab" class="nav-content-left" src="../../static/back.png" mode="widthFix"@click="handleClickBack" /><view class="nav-content-middle"><text>{{titleText}}</text></view></view><slot name="bottom" :style="'height:'+bottomComponentHeight +'px;'"></slot>
</view>
使用方法：
使用默认配置：
<navbar titleText="这是标题"></navbar>
使用自定义插槽：
<navbar :isCustom="true" @init-height="initNavHeight" data-eventsync="true" bottomComponentHeight="45"><template v-slot:left><image class="nav-content-left" src="../../static/back.png" mode="widthFix" @click="handleClickBack" /></template><template v-slot:middle><view class="search-bar-middle" @click="handlerClickSearch()"><image src="../../static/search.png" mode="widthFix" style="width: 24rpx"></image><text class="search-bar-middle-text">搜索内容、体系、文章</text></view></template><template v-slot:bottom><classify-menu-bar :tabArr="tabArr" @on-change-tab="onChangeTab" class="classify-top-container"></classify-menu-bar></template></navbar>
一共有三个插槽：
● left: 左侧
● middle：居中
● bottom：固定底部 （需用传递属性,作为底部buttom的高度）
这篇关于uniapp使用vue3语法构建自定义导航栏，适配小程序胶囊的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
