apple-liquid-tabbar

apple-liquid-tabbar

uni-app Vue3 微信小程序（Skyline）液态玻璃底部 tabBar。

原生 tabBar / 自绘底栏很难同时做到：玻璃质感、果冻切换、中间凸起、长按跟手，又兼容 Skyline worklet。本包把这套交互封装成可安装组件——默认浮在底部（含安全区），能力不够时自动降级，业务只接 v-model 与事件。

要求： Vue3、微信小程序 Skyline。MIT。

安装

npm i apple-liquid-tabbar
# 或 pnpm add / yarn add

使用

1. vite.config.ts

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { appleLiquidTabbar } from 'apple-liquid-tabbar'

export default defineConfig({
  plugins: [uni(), appleLiquidTabbar()],
})

2. 页面

<script setup lang="ts">
import { ref } from 'vue'
import AppleLiquidTabbar from 'apple-liquid-tabbar'
import type {
  LiquidTabItem,
  LiquidTabChangePayload,
  LiquidActionPayload,
} from 'apple-liquid-tabbar'

type TabMeta = { key: string; path: string }

const current = ref(0)
const tabs: LiquidTabItem<TabMeta>[] = [
  {
    id: 'home',
    text: '首页',
    icon: '/static/tab/home.png',
    activeIcon: '/static/tab/home-on.png',
    meta: { key: 'home', path: '/pages/home/index' },
  },
  {
    id: 'me',
    text: '我的',
    icon: '/static/tab/user.png',
    activeIcon: '/static/tab/user-on.png',
    meta: { key: 'me', path: '/pages/me/index' },
  },
]

const onChange = (e: LiquidTabChangePayload<TabMeta>) => {
  // 例：{ index: 1, prevIndex: 0, reason: 'tap', item: { id: 'me', text: '我的', meta: { key: 'me', path: '...' }, ... } }
  current.value = e.index
  uni.switchTab({ url: e.item.meta!.path })
}

const onAction = (e: LiquidActionPayload<TabMeta>) => {
  // 例：{ activeIndex: 0, activeItem: { id: 'home', ... }, action: { id: 'add', text: '添加', ... } }
  console.log('action', e.action.id, 'from tab', e.activeIndex)
}
</script>

<template>
  <AppleLiquidTabbar
    v-model="current"
    :tabs="tabs"
    :action-button="{ id: 'add', text: '添加' }"
    @change="onChange"
    @action="onAction"
  />
</template>

easycom：

{
  "easycom": {
    "custom": {
      "^apple-liquid-tabbar$": "@/uni_modules/apple-liquid-tabbar/views/AppleLiquidTabbar.vue"
    }
  }
}

Props

actionButton 传什么，中间凸起钮怎么表现：

中间钮不占用 v-model 下标，点击走 @action，不会改当前选中 Tab。

LiquidTabItem<T>

LiquidActionButton<T>

事件

LiquidTabChangePayload<T>

回调示例（从「首页」短按切到「我的」）：

const onChange = (e: LiquidTabChangePayload<TabMeta>) => {
  console.log(e)
  // {
  //   index: 1,
  //   prevIndex: 0,
  //   reason: 'tap', // 长按滑动松手则为 'scrub'
  //   item: {
  //     id: 'me',
  //     text: '我的',
  //     icon: '/static/tab/user.png',
  //     activeIcon: '/static/tab/user-on.png',
  //     meta: { key: 'me', path: '/pages/me/index' },
  //   },
  // }
}

LiquidActionPayload<TTab, TAction>

回调示例（当前在「首页」，点中间「添加」）：

const onAction = (e: LiquidActionPayload<TabMeta>) => {
  console.log(e)
  // {
  //   activeIndex: 0,
  //   activeItem: {
  //     id: 'home',
  //     text: '首页',
  //     icon: '/static/tab/home.png',
  //     activeIcon: '/static/tab/home-on.png',
  //     meta: { key: 'home', path: '/pages/home/index' },
  //   },
  //   action: {
  //     id: 'add',
  //     text: '添加',
  //     // icon / meta / ... 按你传入的配置原样带回
  //   },
  // }
}

TabbarThemeOptions

TabbarColors

TabbarLayoutOptions

TabbarPillOptions

TabbarMotionOptions

JellyPresetId

TabbarSettleOptions

TabbarJellyOptions

TabbarScrubOptions

TabbarPressOptions

TabbarQualityOptions

TabbarExperimentalOptions

插件参数

appleLiquidTabbar(options?)