@fox-js/navigation

fox-navigation

导航组件，支持动画过渡

Install

NPM

npm i @fox-js/navigation@next

YARN

yarn add @fox-js/navigation@next

PNPM

pnpm add @fox-js/navigation@next

使用说明

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>

设置页面加载动画

滑入方式

通过route的params属性设置animationType:'slide'

import { usePageHelper } from '@/utils/custom'

pageHelper.append({
    path: target.route,
    params: {
      animationType:'slide'
    }
 })

弹出方式

通过route的params属性设置animationType:'pop'

import { usePageHelper } from '@/utils/custom'

pageHelper.append({
    path: target.route,
    params: {
      animationType:'pop'
    }
 })

Props

字段	说明	类型	默认值
router-view-name	router view名称	String	default
view-tag	view tag标签	Function/String	div
view-calss	view tag class	Function/String	-
transition	动画支持	Boolean	true
drag-remove	是否支持拖曳关闭	Boolean	true
draggable-area	动拖曳区域	Rect
remove-page	关闭顶层页面方法	Function
swipe-duration	拖曳关闭动画时间（ms）	Number	500
remove-move-ratio	触发删除动作的页面宽度比例	Number	0.5
momentum-reduce-ratio	惯性削减比例(0~1),1代表无削减	Number	1
reset-delay	动画完成后，重置状态延时（ms）	Number	60

插槽

名称	说明
default	内容

fox-stack-navigator

stack导航组件，配合append方法使用，页面以堆栈的形式，新增的页面会盖在前一个页面上，支持新增页面的动画效果和拖曳关闭页面。

基础用法

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

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

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

设置页面加载动画

滑入方式

通过route的params属性设置animationType:'slide'

import { usePageHelper } from '@/utils/custom'

pageHelper.append({
    path: target.route,
    params: {
      animationType:'slide'
    }
 })

弹出方式

通过route的params属性设置animationType:'pop'

import { usePageHelper } from '@/utils/custom'

pageHelper.append({
    path: target.route,
    params: {
      animationType:'pop'
    }
 })

Props

字段	说明	类型	默认值
router-view-name	router view名称	String	default
view-tag	view tag标签	Function/String	div
view-calss	view tag class	Function/String	-
transition	动画支持	Boolean	true
drag-remove	是否支持拖曳关闭	Boolean	true
draggable-area	动拖曳区域	Rect
remove-page	关闭顶层页面方法	Function
swipe-duration	拖曳关闭动画时间（ms）	Number	500
remove-move-ratio	触发删除动作的页面宽度比例	Number	0.5
momentum-reduce-ratio	惯性削减比例(0~1),1代表无削减	Number	1
reset-delay	动画完成后，重置状态延时（ms）	Number	60

插槽

名称	说明
default	内容

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

字段	说明	类型	默认值
router-view-name	router view名称	String	default
transition	是否支持过渡动画	Boolean	false

插槽

名称	说明
default	内容

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

字段	说明	类型	默认值
open-page	打开页面方法	Function
router-view-name	router view名称	String	default
routes	路由列表	Route[]
active-path	激活路径	String
height	导航容器高度	Number
width	导航容器宽度	Number
drag	是否支持拖曳	Boolean
swipe-duration	滑动页面动画时间	Number
scroll-time	切换页面动画时间	Number

插槽

名称	说明
default	内容

fox-stack-navigator

stack导航组件，支持动画(和fox-root-navigator类型)，支持拖曳新打开新页面/切换页面

基础用法

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

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

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

Props

字段	说明	类型	默认值
open-page	打开页面方法	Function
router-view-name	router view名称	String	default
routes	路由列表	Route[]
active-path	激活路径	String
height	导航容器高度	Number
width	导航容器宽度	Number
drag	是否支持拖曳	Boolean
swipe-duration	滑动页面动画时间	Number
scroll-time	切换页面动画时间	Number
move-ratio	触发页面移动的比例（相对页面宽度）	Number	0.5
momentum-reduce-ratio	惯性削减比例	Number	1

插槽

名称	说明
default	内容