微信小程序自定义头部导航栏 navigationStyle:custom 返回上一页按钮、返回首页按钮自定义组件

最新推荐文章于 2025-05-29 16:07:48 发布

幽幽靖

最新推荐文章于 2025-05-29 16:07:48 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/ws19900201/article/details/103437964

本文介绍了微信小程序中如何通过设置`navigationStyle:custom`来自定义导航栏，使得顶部导航消失，仅保留胶囊按钮，并且讲解了如何修改胶囊颜色。此外，文章详细展示了自定义返回上一页和返回首页按钮的WXML、WXSS、JS代码实现，以及在页面中的使用方法。参考了简书和优快云的相关文章。

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

微信小程序自定义头部导航栏
.json 文件中加 navigationStyle:custom 顶部导航栏就会消失，只保留右上角胶囊状的按钮，
修改胶囊的颜色：胶囊体目前只支持黑色和白色两种颜色
在.josn 文件中加上 “navigationBarTextStyle”:“white/black”

自定义导航（返回上一页按钮、返回首页按钮自定义组件）
在这里插入图片描述
wxml:

<view class='nav-wrap' style='height: {
      
      {
      
      height*2 + 20}}px;background:{
      
      {
      
      navbarData.backgroundcolor}}'>
    <!-- // 导航栏 中间的标题 -->
  <view class='nav-title' style='line-height: {
      
      {
      
      height*2 + 44}}px;'>{
  
  {navbarData.title}}</view>
  <view style='display: flex; justify-content: space-around;flex-direction: column'>
      <!-- // 导航栏  左上角的返回按钮 和home按钮 -->
      <!-- //  其中wx:if='{
   
   {navbarData.showCapsule}}' 是控制左上角按钮的显示隐藏，首页不显示 -->
    <view class='nav-capsule' style='height: {
      
      {
      
      height*2 + 44}}px;' wx:if='{
    
    {navbarData.showCapsule}}'>
       <!-- //左上角的返回按钮，wx:if='{
   
   {!share}}'空制返回按钮显示 -->
       <!-- //从分享进入小程序时 返回上一级按钮不应该存在 -->
      <view bindtap='_navback' wx:if='{
    
    {!share}}'>
        <image src='/images/goprevico.png' mode='aspectFill' class='back-pre'></image>
      </view>
      <!-- <view class='navbar-v-line' wx:if='{
   
   {!share}}'></view> -->
      <view bindtap='_backhome'>