app 顶部导航条放置按钮，点击跳转到我的页面

Administrator

2021-06-23 73153737f536f8feff7a80eeffce6fed68ff8c57

app 顶部导航条放置按钮，点击跳转到我的页面

 App.vue

@@ -43,7 +43,7 @@
        },
        onHide: function() {
            // console.log('App Hide')
        },
        }
    }
</script>


 components/nav-bar-top/nav-bar-top.vue

New file
@@ -0,0 +1,60 @@
<template name="navBarTop">
    <!-- 自定义顶部导航栏 -->
    <view class="nav-bar-top" @click="gotoMyself()">
        <view class="nav-bar-top-left">
            <image :src="navBarImage" />
        </view>
        <view class="nav-bar-top-title">我要查</view>
    </view>
</template>

<script>
    export default{
        name:"navBarTop",
        data(){
            return{
                navBarImage:this.$store.state.avatar
            }
        },
        methods:{
            //跳转至我的页面
            gotoMyself(){
                uni.navigateTo({
                    url:'../myself/myself'
                })
            }
        }
    }
</script>

<style lang="scss">
    .nav-bar-top{
        background-color: #FFFFFF;
        height: 2.7rem;
        align-items: center;
		
        .nav-bar-top-left{
            // background-color: #00BFFF;
            width: 2rem;
            height: 2rem;
            margin-left: 1rem;
            border-radius: 50px;
            align-items: center;
            justify-content: center;
			
            image{
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 50px;
            }
        }
		
        .nav-bar-top-title{
            font-weight: 550;
            display: flex;
            margin-left: 7rem;
			
        }
		
    }
</style>

 pages.json

@@ -206,7 +206,10 @@
            "path": "pages/alarm_list/alarm_list",
            "name": "alarm_list",
            "style": {
                "navigationBarTitleText": "我要查"
                "navigationBarTitleText": "我要查",
                "app-plus":{
                    "titleNView":"false"
                }
            }
        },
        {
@@ -257,8 +260,7 @@
        }
    ],
    "globalStyle": {//将组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。可以不用引用、注册，直接在页面中使用。
        "autoscan": true,
        "onReachBottomDistance":160
        "autoscan": true
    },
    "tabBar": {
        "color": "#7a7e83",
@@ -291,12 +293,13 @@
                "text": "我要巡",
                "iconPath": "static/img/bar/patrol.png",
                "selectedIconPath": "static/img/bar/patrol-blue.png"
            },{
                "pagePath": "pages/myself/myself",
                "text": "我的",
                "iconPath": "static/tabbar/userHL.png",
                "selectedIconPath": "static/workbench/user01.png"
            }
            // ,{
            //     "pagePath": "pages/myself/myself",
            //     "text": "我的",
            //     "iconPath": "static/tabbar/userHL.png",
            //     "selectedIconPath": "static/workbench/user01.png"
            // }

        ]
    },

 pages/alarm_list/alarm_list.vue

@@ -1,5 +1,14 @@
<template>
    <view class="alarm-list">
        <!-- 自定义顶部导航栏 -->
        <!-- <view class="nav-bar-top" @click="gotoMyself()">
            <view class="nav-bar-top-left">
                <image :src="navBarImage" />
            </view>
            <view class="nav-bar-top-title">我要查</view>
        </view> -->
        <navBarTop></navBarTop>
		
        <view class="navigation-bar">
            <view class="alarm-bar-total" :style="{color:totalColor,borderBottom:totalBoder}" @click="getAlarmListInfo(1)">全部({{totalNumber}})</view>
            <view class="alarm-bar-load" :style="{color:loadColor,borderBottom:loadBoder}" @click="getAlarmListInfo(2)">未处理({{untreatedNumber}})</view>
@@ -39,7 +48,11 @@
</template>

<script>
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue'
    export default{
        components: {
            navBarTop
        },
        data(){
            return{
                pathUrl:"http://s16s652780.51mypc.cn/api",
@@ -209,6 +222,8 @@
</style>
<style lang="scss" scoped>
    .alarm-list,
    .nav-bar-top,
    .nav-bar-top-left,
    .alarm-list-content,
    .alarm-info,
    .alarm-id-type-status,
@@ -236,6 +251,7 @@
            letter-spacing: 1px;
            position: fixed;
            z-index: 999;
            margin-top: 2.7rem;
            
            .alarm-bar-total{
                align-items: center;

 store/state.js

@@ -9,7 +9,7 @@
    puserName: '',
    puserID: '',
    puserIphone:'',
    avatar:"",
    avatar:"../../static/logo.png",
    UserData: {},
}