How to add functions through the navigation bar in uniapp

Uniapp is a development tool based on the Vue.js framework. It is simple and easy to use, suitable for rapid iteration, and has cross-platform features. It can publish multiple terminals such as mini programs, H5 pages, and Apps at the same time.

In uniapp, the navigation bar is one of the essential components in our page. It can be used as the title bar, return button, etc. of the page. For developers, adding functions to the navigation bar can achieve some customized effects and improve user experience. Next, we will introduce how to add functions to the navigation bar of uniapp.

1. Add functions through component development

In uniapp, the navigation bar is composed of a set of components, so we can add functions through component development.

1. First, we need to add a button to the navigation bar, which we can do by using uni-icons in the uniNavBar component. Taking Back button as an example, the code is as follows:

<uni-nav-bar
  title="页面标题"
  :back-text="false"
  :border="false"
  @click-left="back"
>
  <view class="iconfont icon-jiantouarrow487">
  </view>
</uni-nav-bar>

In the above code, we added a custom function named back, which Fired when the Back button is clicked.

2. Then, we need to define the back function in methods, the code is as follows:

methods: {
  back() {
    uni.navigateBack({
      delta: 1
    });
  }
}

In the above code, We use the uni.navigateBack method to implement the return operation. Among them, the delta parameter represents the number of pages returned. Here we set it to 1, which means returning to the previous page.

2. Add functions by customizing the navigation bar

In addition to component development, we can also add functions by customizing the navigation bar.

1. First, we need to introduce the custom navigation bar component into the page.

<template>
  <view>
    <custom-nav-bar @back="back">
      <view class="iconfont icon-jiantouarrow487"></view>
    </custom-nav-bar>
    <view>
      页面内容
    </view>
  </view>
</template>

<script>
import CustomNavBar from '@/components/CustomNavBar.vue';
export default {
  components: {
    CustomNavBar
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

In the above code, we introduced a component named CustomNavBar and added a custom named back in the component function.

2. In the custom CustomNavBar component, add the slot slot and call the back function in it, as shown below:

<template>
  <view>
    <view class="back" @click="back">
      <slot></slot>
    </view>
    <view class="title">
      <slot name="title"></slot>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    back() {
      this.$emit('back')
    }
  }
}
</script>

Conclusion

Adding functions allows us to achieve customized effects in the navigation bar and improve the user experience. In uniapp, we can add functions through component development or custom navigation bar. In the actual development process, we can choose different implementation methods according to specific needs.

The above is the detailed content of How to add functions through the navigation bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!