Uni app custom navigation

Catalog

Jump mode

(1)uni.navigateTo(OBJECT) Keep the current page , Jump to a page in the app

(2)uni.redirectTo(OBJECT) Close current page , Jump to a page in the app

(3)uni.reLaunch(OBJECT) Close all pages , Open to a page in the app

(4)uni.switchTab(OBJECT) Jump to tabBar page , And shut down all the others tabBar page

(5)uni.navigateBack(OBJECT) Close current page , Go back to the previous page or multi-level page

Complete code

Head navigation

Bottom navigation

Global registration

page  

Close your own tabbar

pages Turn off the built-in navigation in

---

Jump mode

(1)uni.navigateTo(OBJECT) Keep the current page , Jump to a page in the app

         Keep the current page , Jump to a page in the app , Use uni.navigateBack You can go back to the original page .OBJECT Parameter description ： Parameter type is required urlString It's an app that needs to jump tabBar The path of the page , The path can be followed by parameters . Use... Between parameters and paths ? Separate , Parameter key and parameter value = Connected to a , Use... For different parameters & Separate ;

(2)uni.redirectTo(OBJECT) Close current page , Jump to a page in the app

         Close current page , Jump to a page in the app .OBJECT Parameter description parameter type is required urlString It's an app that needs to jump tabBar The path of the page , The path can be followed by parameters . Use... Between parameters and paths ? Separate , Parameter key and parameter value = Connected to a , Use... For different parameters & Separate ;

uni.redirectTo({

url: 'test?id=1' //  Pass parameters  id, The value is 1

});

(3)uni.reLaunch(OBJECT) Close all pages , Open to a page in the app

         Close all pages , Open to a page in the app .OBJECT Parameter description ： Parameter type is required urlString It is the path of the page in the application that needs to jump , The path can be followed by parameters . Use... Between parameters and paths ? Separate , Parameter key and parameter value = Connected to a , Use... For different parameters & Separate ;

(4)uni.switchTab(OBJECT) Jump to tabBar page , And shut down all the others tabBar page

Jump to tabBar page , And shut down all the others tabBar page .OBJECT Parameter description ： Parameter type is required urlString You need to jump tabBar The path of the page ( Need to be in app.json Of tabBar Page of field definition ), The path cannot be followed by parameters

(5)uni.navigateBack(OBJECT) Close current page , Go back to the previous page or multi-level page

         Close current page , Go back to the previous page or multi-level page . It can be done by getCurrentPages() Get the current page stack , Decide how many layers you need to go back .OBJECT Parameter description ： Parameter type is required deltaNumber1 Number of pages returned , If delta Greater than the number of existing pages , Then go back to the home page .

uni.navigateTo({

url: 'B?id=1'

});

uni.navigateTo({

url: 'C?id=1'

});

uni.navigateBack({

delta: 2

});

Complete code

Head navigation

<template>
  <!--  Custom navigation bar  -->
  <view class="navigation-box">
    <!--  Return key  -->
    <uni-icons type="arrow-left" size="25" @click="back"></uni-icons>
    <!--  title  -->
    <view class="title"> {
   {text}} </view>
    <!--  Right symbol  -->
    <uni-icons type="home" size="25" @click="home"></uni-icons>
  </view>
</template>

<script>
  export default {
    props: {
      text: { //  Fields must be provided  
        default: ' details '
      }
  },
  name: 'topbar',
    methods: {
      home() {
        uni.switchTab({

          url: '/pages/index/index' //  Pass parameters  id, The value is 1

        });
      },
      back() {
        uni.navigateBack({
          delta: 1
        });
      },
    }
  }
</script>
<style scoped lang="scss">
  // Custom navigation bar 
  .navigation-box {
    position: fixed;
    top: 0;
    height: 88rpx;
    background-color: #FFFFFF;
    width: 100%;
    z-index: 100;
    border-bottom: 1rpx solid #EEEEEE;
    display: flex;
    justify-content: space-between;
    padding: 32rpx;
    align-items: center;
    box-sizing: border-box;

    // Return button 
    .back_but {
      width: 40rpx;
      height: 40rpx;
    }

    // title  
    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 600;
    }

    // Small mark on the right  
    .right-biao {
      width: 56rpx;
      height: 18rpx;
    }
  }
</style>

Bottom navigation

Each page has a bottom navigation

Need to be in pages In the definition of tabbar, Of course, you can also use it all t Customize tabbar Pay attention to the jump mode and path

<template>
  <view class="tarbar">
    <view v-for='(item,index) in datas' @tap="tabClick(index,item.urls,item.id)">
      <img :src="item.iconPath" class="icon" v-if="totarBer !== index">
      <img :src="item.selectedIconPath" class="icon" v-else>
      <view class="text" v-text="item.name"></view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'tabbar',
    props: ["totarBer"], // Value passed from parent component   To control the current color 
    data() {
      return {
        datas: [{
            urls: "/pages/index/index",
            iconPath: "/static/images/tabBar/index.png",
            selectedIconPath: "static/images/tabBar/index-active.png",
            name: ' home page ',
            id: 1,
          },
          {
            urls: "/pages/classification/index",
            iconPath: "static/images/tabBar/classification.png",
            selectedIconPath: "static/images/tabBar/classification-active.png",
            name: ' classification ',
            id: 2,
          },
          {
            urls: "/pages/Consultant/index",
            iconPath: "static/images/tabBar/Consultant.png",
            selectedIconPath: "static/images/tabBar/Consultant-active.png",
            name: ' consultant ',
            id: 3,
          },
          {
            urls: "/pages/my/index",
            iconPath: "static/images/tabBar/my.png",
            selectedIconPath: "static/images/tabBar/my-active.png",
            name: ' my ',
            id: 4,
          },
        ],
      }
    },

    methods: {
      tabClick(i, urls, id) {
        uni.switchTab({
          url: urls
        });
      }
    }
  }
</script>

<style scoped>
  .tarbar {
    width: 96%;
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    z-index: 100;
    font-size: 30rpx;
    color: #666;
    border-top: 3px solid #eee;
    padding-top: 3px;
    box-sizing: border-box;
    font-size: 16rpx;
  }

  .tarbar view {
    text-align: center;
  }

  .icon {
    width: 24px;
    height: 24px;
  }

  .text {
    line-height: 5px;
  }
</style>

Global registration

import tabbar from './components/tabbar.vue'
import topbar from './components/topbar.vue'
Vue.component('tabbar', tabbar);
Vue.component('topbar', topbar);

page  

    <tabbar :totarBer='tar'></tabbar>
  data() {
      return {
        tar: 3
      }
    <topbar text=' My consulting order '></topbar>

Close your own tabbar

		onLaunch: function() {

			console.log('App Launch')
             uni.hideTabBar()
		},

pages Turn off the built-in navigation in

 {
      "path": "pages/ConsultingOrder/ConsultingOrder",
      "style": {
        "navigationBarTitleText": " Consulting orders ",
        "navigationBarBackgroundColor": "#fff",
        "app-plus": {
          "titleNView": false
        }
      }
    },