uniapp开发微信小程序自定义顶部导航栏功能实例

下面我来为大家详细讲解一下“uniapp开发微信小程序自定义顶部导航栏功能实例”的完整攻略。

一、准备工作

首先，需要使用HBuilderX开发工具创建一个新项目，选择uni-app项目，在项目配置的时候需要选择添加微信小程序插件，此处添加“微信小程序自定义组件插件”。其次，需要在“App.vue”文件中定义NavigationBar组件，定义方法如下：

<template>
  <view>
    <navigationBar :title="title" :background="backgroundColor" :color="color"></navigationBar>
    <view class="uni-padding-wrap uni-common-mt">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  import navigationBar from '@/components/navigationBar'
  export default {
    components: {
      navigationBar
    },
    props: {
      title: { // 顶部导航栏标题
        type: String,
        default: ''
      },
      backgroundColor: { // 背景颜色
        type: String,
        default: '#fff'
      },
      color: { // 字体颜色
        type: String,
        default: '#000'
      }
    }
  }
</script>

二、编写NavigationBar组件

1. 编写navgationBar组件的主要代码，添加以下文件：

// components/navigationBar.vue

<template>
  <view class="navigationBar" style="height: {{ height }}px; background-color: {{ background }}; color: {{ color }} ">
      <view class="left">
        <slot name="left">
          <image v-if="isBack" src="/static/left.png" @tap="goBack"></image>
          <text v-else>{{ leftText }}</text>
        </slot>
      </view>

      <view class="title">
        <text v-if="title">{{ title }}</text>
        <slot name="title"></slot>
      </view>

      <view class="right">
        <slot name="right">
          <text>{{ rightText }}</text>
        </slot>
      </view>
  </view>
</template>

<script>
  export default {
    name: 'navigationBar',
    props: {
      title: {
        type: String
      },
      background: {
        type: String,
        default: '#ffffff'
      },
      color: {
        type: String,
        default: '#000000'
      },
      leftText: {
        type: String,
        default: '返回'
      },
      rightText: {
        type: String,
        default: ''
      },
      isBack: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        height: 44
      }
    },
    methods: {
      goBack () {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style>
  .navigationBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
  }

  .navigationBar .left {
    display: flex;
    align-items: center;
  }

  .navigationBar .left image {
    height: 20px;
    width: 20px;
  }

  .navigationBar .left text {
    margin-top: 2px;
    margin-left: 5px;
  }

  .navigationBar .right text {
    margin-top: 2px;
    margin-right: 10px;
  }

  .navigationBar .title {
    flex: 1;
    text-align: center;
  }
</style>

1. 在main.js中异步引入组件：

import Vue from 'vue'
import App from './App'
import navigationBar from '@/components/navigationBar.vue'

Vue.config.productionTip = false

Vue.component('navigationBar', navigationBar)

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

三、在页面中使用NavigationBar组件

在需要使用自定义顶部导航栏功能的页面中，可以直接引用NavigationBar组件，方法如下：

<template>
  <view>
    <navigationBar title="自定义导航栏" :background="navBarColor" :color="fontColor">
      <template v-slot:left>
        <text @click="back">返回</text>
      </template>
      <template v-slot:right>
        <text>更多</text>
      </template>
    </navigationBar>
    // 页面其它内容
  </view>
</template>

<script>
  export default {
    data () {
      return {
        navBarColor: '#fff', //自定义导航栏背景颜色
        fontColor: '#333' //自定义导航栏字体颜色
      }
    },
    methods: {
      back () {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

这样就可以完成自定义顶部导航栏的开发，如此简单，快来试试吧！