uni-app自定义导航
目录
[TOC]
跳转方式
(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
}
}
},
