uni-app自定义导航

2024-05-10 02:11:32

目录

跳转方式

(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}}},

uni-app自定义导航相关推荐

uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
android 自定义标签导航栏,自定义导航栏app下载-自定义导航栏（Custom Navigation Bar）安卓版v0.4.3-PC6安卓网...
自定义导航栏(Custom Navigation Bar)app是款非常好用的实用工具,自定义导航栏能让你自己设置个性的导航栏,再也不用为单调的导航栏而发愁,独特且唯一,感兴趣的朋友就来下载自定义导航 ...
uniapp自定义导航栏的开发
在我眼里自定义导航分2类: 原生基础上 || 非原生基础上总结:项目当中能原生就原生,提高性能区别 uni-app 自带原生导航栏,在pages.json里配置. 原生导航的体验更好,渲染新页面时 ...
uniapp自定义导航栏，高度，自定义组件
设置自定义导航栏 :globalStyle 内 navigationStyle": "custom" 配置页面:pages.json "globalStyle& ...
uniapp中自定义导航栏
相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然u ...
uni-app 自定义导航栏
效果图隐藏小程序底部导航栏封装组件在 components 文件夹中新建一个 tabbar.vue 文件 <template><view class="tabbar& ...

最新文章

热门文章