uview自定义导航栏（自定义返回路径）-蒲公英云

uview自定义导航栏（自定义返回路径）

傷城~ 2021-09-07 06:16 4231阅读 3赞

依赖包：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>