uview自定义导航栏(自定义返回路径)

依赖包:uview框架配置

自定义导航栏
1.pages.json页面关闭原生的导航栏

{
			// 待办事项
            "path" : "pages/home/backlog/backlog/backlog",
            "style" :                                                                                    
            {
              "navigationStyle" : "custom"                //关闭自带的导航栏}

2.源码

<!-- 选项卡 待办事项 -->
<template>
	<view>
		<!-- 自定义导航 -->
		<!--自定义返回的路径:custom-back="gotabpolice" -->
		<u-navbar title-color="#fff" back-icon-color="#fff" 
		:is-fixed="isFixed" 
		:is-back="true" 
		:background="background"
		:title="title" 
		:back-icon-name="backIconName" 
		:back-text="backText"
		:custom-back="gotabpolice" >
			<view class="navbar-right" slot="right" v-if="slotRight">
				<view style="margin:5px 12px 0 0 ">
					<image style="width:18.25px;height: 17.75px;" src="../../../../static/img/admin/search.png" mode="">
					</image>
				</view>
			</view>
		</u-navbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 自定义导航栏
				title: '待办事项',
				slotRight: true,
				backText: '',
				backIconName: 'nav-back',
				right: false,
				showAction: false,
				rightSlot: false,
				useSlot: false,
				background: {
					background: '#2E95FF'
				},
				isBack: true,
				search: false,
				custom: false,
				isFixed: true,
				keyword: '',
				// #ifdef MP
				slotRight: false,
				// #endif
				// #ifndef MP
				slotRight: true,
				// #endif
				//自定义导航栏结束
			}
		},
		methods: {
			gotabpolice(){
				uni.switchTab({
					url:'../../tabbar/tab-police/tab-police'
				})
			}
		}
	}
</script>

<style>

</style>
  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值