uniapp小程序自定义头部导航-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序自定义头部导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们在开发小程序时，自带的头部导航样式往往不能满足需求，故只能自定义导航，接下来简要介绍下如何实现：

1. 去除自带的头部导航

要想自定义头部导航，首先要到pages.json文件夹中，找到对应页面，然后在style中写上代码：

// 找到对应页面，在style中写下所需代码
{
   "path": "pages/about/apply",
   "style": {
       "navigationStyle": "custom"  // 注意一定要书写此行代码
   }
}

2.封装自定义的头部导航

一个小程序，可能会有多个页面会使用到自定义的头部导航，所以为了方便使用，可以将导航封装为一个组件，具体代码如下：

1.html代码

<template>
  <view class="custom-nav">
    <view
      class="my-nav"
      :style="[{ background }, { color }, { height }, { paddingTop }]"
    >
      <!-- 左侧返回按钮 -->
      <view
        class="left"
        @click="onBack"
        v-if="back"
        :style="[{ color }, { paddingTop }]"
      >
      <u-icon name="arrow-left" :color="color" size="36"></u-icon>
      </view>
      <!-- 中间标题文字 -->
      <view class="title" :style="{color}">
        {{ title }}
      </view>
    </view>
    <view :style="{height}"></view>
  </view>
</template>

2.css代码

<style lang="scss">
  .my-nav{
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    z-index: 100;
    padding-bottom: 10rpx;

    .left {
      float: left;
      position: absolute;
      // width: 100rpx;
      line-height: 90rpx;
      top: 0;
      bottom: 0;
      left: 20rpx;
      margin: auto;
    }

    .title {
      padding: 0;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      // color: #FFFFFF;
    }
  }
</style>

3.js代码

<script>
  export default {
    data() {
      return {
        height: 0,
        paddingTop: 0,
      };
    },
    // props: ["title", "back"],
    props: {
      title: {
        // 标题文字(默认为空)
        type: String,
        default: "",
      },
      color: {
        // 标题和返回按钮颜色(默认白色)
        type: String,
        default: "#fff",
      },
      //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
      background: {
        // 背景颜色(不传值默认透明)
        type: String,
        default: "transparent",
      },
      back: {
        // 是否显示返回按钮(不传值默认不显示)
        type: Boolean,
        default: true,
      },
    },

    created() {
      const demo = uni.getMenuButtonBoundingClientRect();
      this.paddingTop = demo.top * 2 + "rpx";
      // 状态栏高度
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
      // 导航栏高度(标题栏高度)一般都为44px，所以我这里直接使用44
      // 总体高度 = 状态栏高度 + 导航栏高度
      this.height = (statusBarHeight + 44) * 2 + 'rpx'
    },
    methods: {
      // 左侧返回按钮调用
      //直接返回上一级
      onBack() {
        // this.$emit("onBack");
        uni.navigateBack({
					delta: 1 // 返回的页面数
				})
      },
    },
  };
</script>

3.使用自定义头部导航组件

（1）先导入组件

 import topNav from "../components/topNav/topNav.vue";

（2）注册组件

export default {
  components: {
    topNav,
  },
}

（3）使用组件

<topNav :background="backgroundColor" title="首页"></topNav>

// backgroundColor这里传的是渐变色，除了传颜色，也可以传背景图
// 以下代码是写在js中的
data() {
  return {
     backgroundColor: "linear-gradient(to top, #3F77FE, #294EFA)",
}

4.效果图

uniapp自定义顶部导航栏,前端实战,uni-app,小程序