@fox-js/navigation v4.0.0

fox-navigation

导航组件，支持动画过渡

Install

NPM

npm i @fox-js/navigation -S

YARN

yarn add @fox-js/navigation

PNPM

pnpm add @fox-js/navigation

使用说明

fox-root-navigator

root导航组件，在入口vue文件(App.vue)上使用，支持新增页面的动画效果和拖曳关闭页面。

基础用法

<script setup lang="ts">
import { usePageHelper } from '@/utils/custom'
// 获取page helper
const pageHelper = usePageHelper()
// 定义remove page函数
const removePage = () => {
  pageHelper.remove()
}
</script>

<template>
  <fox-root-navigator :remove-page="removePage"></fox-root-navigator>
</template>

<style lang="scss">
</style>

Props

插槽

fox-card-navigator

卡片导航组件，配合多标签页容器使用，具备缓存页面的能力。

基础用法

<script setup lang="ts">
const rootName = $ref('_tab_view')
</script>

<template>
  <fox-card-navigator
        :router-view-name="rootName"
        :transition="true"
      ></fox-card-navigator>
</template>

<style lang="scss">
</style>

Props

插槽

fox-swiper-navigator

swiper导航组件，配合tab标签使用（例如手机端的主界面），支持拖曳新打开新页面/切换页面

基础用法

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import { usePageHelper } from '@/utils/custom'
import store from '@/store'
import tabs from './data'
const contentPadding = {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}
// -------------- 导航设置 ---------------
// content width/height
const contentWidth = ref(0)
const contentHeight = ref(0)
// page ref
const pageRef = ref(null)
// root name
const rootName = ref('_tab_view')
// routes
const routes = computed(() => {
  return tabs.map(tab => {
    return {
      path: tab.route
    }
  })
})
// active route path
const activeRoutePath = computed({
  set: (newVal: string) => {
    // 更新tab bar的index
    index.value = routes.value.findIndex(r => {
      return r.path === newVal
    })
    store.setCurrentRoutePath(newVal, rootName.value)
  },
  get: (): string => {
    return store.getCurrentRoutePath(rootName.value) as string
  }
})
// open page
const openPage = (route: any, index: number) => {
  onTabChange(index)
}

// -------------tab bar 设置 ------------------
//当前tab索引
const index = ref(0)
// 获取page helper
const pageHelper = usePageHelper()
// tab change事件
const onTabChange = (index: any) => {
  const tab = tabs[index]
  // open页面
  pageHelper.open(tab.route)
  // 当前的route path到公共store中
  store.setCurrentRoutePath(tab.route, rootName.value)
}
// content应用
const contentRef = ref(null)
// 加载后处理
onMounted(() => {
  if (pageRef.value) {
    const anyPage: any = pageRef.value
    contentWidth.value = anyPage.getPageContentWidth()
    if (contentWidth.value === 0) {
      const anyContent: any = contentRef.value
      contentWidth.value = anyContent.$el.offsetWidth
    }
    contentHeight.value = anyPage.getPageContentHeight()
  }
  // 当前选中tab index
  let curIndex = index.value
  // 获取之前保存的route path
  let path = store.getCurrentRoutePath(rootName.value)
  if (path) {
    let i = tabs.findIndex(tab => {
      return tab.route === path
    })
    curIndex = i !== -1 ? i : curIndex
    //  更新tab的model
    index.value = curIndex
  }
  // 触发页面跳转
  onTabChange(curIndex)
})
</script>

<template>
  <fox-page :content-padding="contentPadding" ref="pageRef">
    <fox-footer>
      <fox-tabbar v-model="index" @change="onTabChange">
        <template v-for="tab in tabs" :key="tab.title">
          <fox-tabbar-item :title="tab.title" :icon="tab.icon"></fox-tabbar-item>
        </template>
      </fox-tabbar>
    </fox-footer>
    <fox-content ref="contentRef">
      <fox-swiper-navigator
        v-model:activePath="activeRoutePath"
        :router-view-name="rootName"
        :routes="routes"
        :open-page="openPage"
        :transition="true"
        :width="contentWidth"
        :height="contentHeight"
      ></fox-swiper-navigator>
    </fox-content>
  </fox-page>
</template>

<style lang="scss" scoped></style>

Props

插槽