uniapp项目实践总结(六)自定义顶部导航栏

本篇主要讲述如何自定义顶部导航栏,有时候默认导航栏不足以满足我们的需求,这时候就需要自定义导航栏来解决这个问题。

目录

  • 默认导航
  • 修改配置
  • 自定义顶部

默认导航

自带的默认顶部导航设置的内容有限,不容易扩展修改,因此如果有更加个性化的需求,则需要自定义顶部导航。

配置如下:

"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "HelloApp",
    "navigationBarBackgroundColor": "#333",
    "backgroundColor": "#f8f8f8"
}

更多配置查看:https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
在这里插入图片描述

修改配置

pages.json文件中的globalStyle加一个配置。

"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "HelloApp",
    "navigationBarBackgroundColor": "#333",
    "backgroundColor": "#f8f8f8",
    "navigationStyle": "custom"
}

这样我们就可以自定义顶部导航了。

自定义顶部

使用官方插件

基本用法如下:

自己编写组件

有时候官方的自定义顶部导航可能还是达不到我们的需求,这时候可以自己编写一个自定义顶部导航组件,更加灵活高效。

编写组件

components下面新建文件夹q-navbar和文件q-navbar.vue

  • html 部分

这部分就是使用flex布局的一个导航,里面是否绑定了很多父组件的消息,可以自定义左边、中间、右边的图标、名称和是否显示。

还有一个特色就是如果不想使用默认的,可以使用slot插槽自己写适合自己的那块内容。


  
    
      
        
          
          {{props.left.name}}
        
      
    
    
      
        
          
          {{props.center.name}}
        
      
    
    
      
        
          
          {{props.right.name}}
        
      
    
  
  • 样式部分
.q-navbar {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  width: 100%;
  height: $navBarHei;
  background: $f8;
  .q-navbar-item {
    display: flex;
    align-items: center;
    width: 100%;
    .q-navbar-icon {
      padding: 0 5rpx;
    }
    .q-navbar-text {
      margin-left: 10rpx;
    }
  }
  .q-navbar-left,
  .q-navbar-right {
    max-width: 120rpx;
    width: 100%;
  }
  .q-navbar-left {
    .q-navbar-item {
      justify-content: flex-start;
    }
  }
  .q-navbar-right {
    .q-navbar-item {
      justify-content: flex-end;
    }
  }
  .q-navbar-center {
    flex: 1;
    text-align: center;
    .q-navbar-item {
      justify-content: center;
    }
  }
}

uni.scss里面加入:

$navBarHei: 110rpx; // 顶部导航栏高度
  • js 部分

主要是传递数据,可以根据按钮绑定的事件进行处理。

const props = defineProps({
  // 文字颜色
  color: {
    type: String,
    default: "#333",
  },
  // 背景色
  bgColor: {
    type: String,
    default: "#f8f8f8",
  },
  // 边框色
  borColor: {
    type: String,
    default: "#e3e3e3",
  },
  // 左边配置
  left: {
    type: Object,
    default() {
      return {
        name: "", // 导航名称
        icon: "arrow-line-left", // 图标名称
        url: "", // 页面地址
        isTabbar: false, // 是否导航页面
        type: "click", // 点击类型:click默认,self自定义
        show: true, // 是否显示
      };
    },
  },
  // 中间配置
  center: {
    type: Object,
    default() {
      return {
        name: "首页",
        icon: "",
        url: "",
        isTabbar: false,
        type: "click",
        show: true,
      };
    },
  },
  // 右边配置
  right: {
    type: Object,
    default() {
      return {
        name: "",
        icon: "more",
        url: "",
        isTabbar: false,
        type: "click",
        show: true,
      };
    },
  },
});

// 发送消息
const emits = defineEmits(["change"]);

// 方法

// 点击设置
function clickSet(from = "center") {
  let info = props[from];
  info.from = from;
  if (info.type == "click") {
    let url = info.url;
    if (!url) {
      uni.navigateBack({
        delta: 1,
      });
      return;
    }
    if (info.isTabbar) {
      uni.switchTab({
        url: info.url,
      });
    } else {
      uni.navigateTo({
        url: info.url,
      });
    }
  } else {
    emits("change", info);
  }
}

预览

在这里插入图片描述
以上就是自定义顶部导航栏的主要内容,如有不足之处,请多多指正。

你可能感兴趣的:(uniapp项目实践总结(六)自定义顶部导航栏)