uni-app自定义导航

目录

跳转方式

(1)uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面

(2)uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面

(3)uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面

(4)uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

(5)uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面

完整代码

头部导航

底部导航

全局注册

页面 

关闭自带tabbar

pages中关闭自带导航

---

跳转方式

(1)uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面

        保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

(2)uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面

        关闭当前页面，跳转到应用内的某个页面。OBJECT参数说明参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

uni.redirectTo({

url: 'test?id=1' // 传递参数 id，值为1

});

(3)uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面

        关闭所有页面，打开到应用内的某个页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

(4)uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。OBJECT参数说明：参数类型必填说明urlString是需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面)，路径后不能带参数

(5)uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面

        关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。OBJECT参数说明：参数类型必填说明deltaNumber1返回的页面数，如果 delta 大于现有页面数，则返回到首页。

uni.navigateTo({

url: 'B?id=1'

});

uni.navigateTo({

url: 'C?id=1'

});

uni.navigateBack({

delta: 2

});

完整代码

头部导航

<template>
  <!-- 自定义导航栏 -->
  <view class="navigation-box">
    <!-- 返回键 -->
    <uni-icons type="arrow-left" size="25" @click="back"></uni-icons>
    <!-- 标题 -->
    <view class="title"> {
   {text}} </view>
    <!-- 右侧符号 -->
    <uni-icons type="home" size="25" @click="home"></uni-icons>
  </view>
</template>

<script>
  export default {
    props: {
      text: { // 必须提供字段 
        default: '详情'
      }
  },
  name: 'topbar',
    methods: {
      home() {
        uni.switchTab({

          url: '/pages/index/index' // 传递参数 id，值为1

        });
      },
      back() {
        uni.navigateBack({
          delta: 1
        });
      },
    }
  }
</script>
<style scoped lang="scss">
  //自定义导航栏
  .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;

    //返回按钮
    .back_but {
      width: 40rpx;
      height: 40rpx;
    }

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

    //右侧小标 
    .right-biao {
      width: 56rpx;
      height: 18rpx;
    }
  }
</style>

底部导航

每个页面都有底部导航

需要在pages中定义tabbar， 当然也可以全部使用t自定义tabbar 注意跳转方式和路径

<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"], //从父组件传来的值 来控制点击当前的颜色
    data() {
      return {
        datas: [{
            urls: "/pages/index/index",
            iconPath: "/static/images/tabBar/index.png",
            selectedIconPath: "static/images/tabBar/index-active.png",
            name: '首页',
            id: 1,
          },
          {
            urls: "/pages/classification/index",
            iconPath: "static/images/tabBar/classification.png",
            selectedIconPath: "static/images/tabBar/classification-active.png",
            name: '分类',
            id: 2,
          },
          {
            urls: "/pages/Consultant/index",
            iconPath: "static/images/tabBar/Consultant.png",
            selectedIconPath: "static/images/tabBar/Consultant-active.png",
            name: '咨询师',
            id: 3,
          },
          {
            urls: "/pages/my/index",
            iconPath: "static/images/tabBar/my.png",
            selectedIconPath: "static/images/tabBar/my-active.png",
            name: '我的',
            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>

全局注册

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

页面 

    <tabbar :totarBer='tar'></tabbar>
  data() {
      return {
        tar: 3
      }
    <topbar text='我的咨询订单'></topbar>

关闭自带tabbar

		onLaunch: function() {

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

pages中关闭自带导航

 {
      "path": "pages/ConsultingOrder/ConsultingOrder",
      "style": {
        "navigationBarTitleText": "咨询订单",
        "navigationBarBackgroundColor": "#fff",
        "app-plus": {
          "titleNView": false
        }
      }
    },