top-window.uvue

<template>
  <view class="top-window-header">
    <view class="left-header">
      <navigator class="left-header" open-type="reLaunch" url="/pages/component/global-properties/global-properties">
        <image src="/static/logo.png" class="logo" mode="heightFix"></image>
        <text>hello uni-app</text>
      </navigator>
    </view>
    <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
      @onTabItemTap="toSecondMenu" />
  </view>
</template>

<script lang="uts">
  type IndexPageItem = {
    tabBar : string;
    index : string;
  }
  type OnTabItemTapEvent = {
    pagePath : string;
    text : string;
    index : number;
  }
  export default {
    data() {
      return {
        selected: {
          component: 0,
          API: 1,
          CSS: 2,
          template: 3
        },
        current: 0,
        indexPage: [{
          tabBar: '/pages/tabBar/component',
          index: '/pages/component/global-properties/global-properties'
        }, {
          tabBar: '/pages/tabBar/API',
          index: '/pages/API/get-app/get-app'
        }, {
          tabBar: '/pages/tabBar/CSS',
          index: '/pages/CSS/layout/width'
        }, {
          tabBar: '/pages/tabBar/template',
          index: '/pages/template/long-list/long-list'
        }] as IndexPageItem[]
      }
    },
    watch: {
      $route: {
        immediate: true,
        handler(newRoute) {
          const width = uni.getSystemInfoSync().windowWidth
          if (width <= 768) {
            return
          }
          let path = newRoute.path
          let category
          if (path === '/') {
            category = 'component'
          } else if (path.indexOf('/pages/tabBar') === 0) {
            const indexPageItem = this.indexPage.find(item => item.tabBar === path)
            if (!indexPageItem) {
              console.error('Invalid page path: ', path)
              return
            }
            uni.redirectTo({
              url: indexPageItem.index
            })
            category = path.split('/')[3]
          } else {
            category = path.split('/')[2]
          }
          this.current = this.selected[category]
        }
      }
    },
    methods: {
      // UniEvent类型报错，临时处理
      toSecondMenu(e : OnTabItemTapEvent) {
        const activeTabBar = '/' + e.pagePath
        for (const item of this.indexPage) {
          if (activeTabBar === item.tabBar) {
            uni.redirectTo({
              url: item.index
            })
          }
        }
      }
    }
  }
</script>

<style>
  .top-window-header {
    height: 60px;
    padding: 0 15px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
    background-color: #FFFFFF;
  }

  .left-header {
    flex-direction: row;
    align-items: center;
    flex: 1;
  }

  .logo {
    height: 30px;
    width: 30px;
    margin-right: 8px;
  }

  .tab-bar-flex {
    width: 360px;
  }
</style>