更新记录

1.0.0（2025-12-05） 下载此版本

初始功能

平台兼容性

uni-app(4.66)

liaction-scaffold

一个基于UniApp和Vue 2的Flutter Scaffold-like组件，提供高度可配置的AppBar、顶部导航栏、底部导航栏、抽屉、悬浮操作按钮(FAB)和SnackBar等功能。

功能特性

• ✅ AppBar: 可配置的顶部应用栏，支持自定义标题、背景色、文字颜色等
• ✅ 顶部导航栏: 基于liaction-tabs的可滚动顶部导航
• ✅ 底部导航栏: 基于liaction-tabs的底部导航
• ✅ 抽屉: 可配置位置、宽度、点击遮罩是否关闭等
• ✅ 悬浮操作按钮(FAB): 支持自定义图标、颜色、大小等
• ✅ SnackBar: 底部提示条，支持自定义消息、操作按钮、持续时间等
• ✅ 高度可配置: 所有组件都支持丰富的配置选项
• ✅ 支持插槽: 所有组件都支持自定义插槽

安装

在UniApp项目中通过插件市场安装，或直接将组件复制到项目中。

配置选项

AppBar配置

TopNavigation配置

tabsConfig配置

BottomNavigationBar配置

Drawer配置

FloatingActionButton配置

SnackBar配置

其他配置

事件说明

插槽说明

方法说明

使用示例

普通示例

<template>
  <liaction-scaffold 
    :app-bar="appBar"
    :top-navigation="topNavigation"
    :bottom-navigation-bar="bottomNavigationBar"
    :drawer="drawer"
    :floating-action-button="floatingActionButton"
    :background-color="backgroundColor"
    @appbar-leading-click="handleAppBarLeadingClick"
    @appbar-action-click="handleAppBarActionClick"
    @top-nav-click="handleTopNavClick"
    @bottom-nav-click="handleBottomNavClick"
    @fab-click="handleFabClick"
  >
    <!-- 内容区域 -->
    <view class="content">
      <text>这是页面内容</text>
    </view>

    <!-- 抽屉内容 -->
    <template #drawer>
      <view class="drawer-content">
        <text>抽屉内容</text>
      </view>
    </template>
  </liaction-scaffold>
</template>

<script>
export default {
  data() {
    return {
      // AppBar配置
      appBar: {
        show: true,
        title: 'Scaffold演示',
        backgroundColor: '#007AFF',
        textColor: '#FFFFFF'
      },

      // 顶部导航配置
      topNavigation: {
        show: true,
        items: [
          { id: 'all', text: '全部' },
          { id: 'news', text: '新闻' },
          { id: 'sports', text: '体育' }
        ],
        tabsConfig: {
          showBadge: false,
          tabFlex: true
        }
      },

      // 底部导航配置
      bottomNavigationBar: {
        show: true,
        items: [
          { id: 'home', text: '首页'},
          { id: 'category', text: '分类' },
          { id: 'profile', text: '我的' }
        ],
        tabsConfig: {
          showBadge: true
        }
      },

      // 抽屉配置
      drawer: {
        width: '280px',
        position: 'left',
        closeOnOverlayClick: true
      },

      // FAB配置
      floatingActionButton: {
        show: true,
        icon: '+',
        backgroundColor: '#007AFF'
      },

      // 背景颜色
      backgroundColor: '#F5F5F5'
    }
  },
  methods: {
    // 处理AppBar返回按钮点击
    handleAppBarLeadingClick() {
      console.log('AppBar返回按钮点击');
    },

    // 处理AppBar操作按钮点击
    handleAppBarActionClick(index) {
      console.log('AppBar操作按钮点击，索引：', index);
    },

    // 处理顶部导航点击
    handleTopNavClick(index) {
      console.log('顶部导航点击，索引：', index);
    },

    // 处理底部导航点击
    handleBottomNavClick(index) {
      console.log('底部导航点击，索引：', index);
    },

    // 处理FAB点击
    handleFabClick() {
      console.log('FAB点击');
      // 显示SnackBar
      this.$refs.scaffoldRef.displaySnackBar({
        message: 'FAB被点击了',
        duration: 2000
      });
    }
  }
}
</script>

自定义底部导航

<liaction-scaffold 
  :app-bar="appBar"
  :bottom-navigation-bar="bottomNavigationBar"
  @bottom-nav-click="handleBottomNavClick"
>
  <!-- 主内容 -->
  <view class="content">
    <text>这是页面内容</text>
  </view>

  <!-- 自定义底部导航 -->
  <template #bottom-nav>
    <view class="custom-bottom-nav">
      <view 
        v-for="(item, index) in bottomNavigationBar.items" 
        :key="item.id"
        class="nav-item"
        :class="{ 'active': bottomNavigationBar.currentIndex === index }"
        @click="handleBottomNavItemClick(index)"
      >
        <uni-icons 
          :type="item.icon" 
          size="24px" 
          :color="bottomNavigationBar.currentIndex === index ? '#007AFF' : '#666666'"
        ></uni-icons>
        <text 
          class="nav-text"
          :style="{
            color: bottomNavigationBar.currentIndex === index ? '#007AFF' : '#666666'
          }"
        >
          {{ item.text }}
        </text>
      </view>
    </view>
  </template>
</liaction-scaffold>

<style scoped>
.custom-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  background-color: #FFFFFF;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
  padding: 4px 0;
}

.nav-item.active {
  font-weight: 600;
}

.nav-text {
  font-size: 12px;
  margin-top: 4px;
}
</style>

<script>
export default {
  data() {
    return {
      appBar: {
        title: '自定义底部导航',
        backgroundColor: '#007AFF',
        textColor: '#FFFFFF'
      },
      bottomNavigationBar: {
        items: [
          { id: 'home', icon: 'home', text: '首页' },
          { id: 'category', icon: 'grid', text: '分类' },
          { id: 'discover', icon: 'compass', text: '发现' },
          { id: 'profile', icon: 'person', text: '我的' }
        ],
        currentIndex: 0
      }
    }
  },
  methods: {
    handleBottomNavClick(index) {
      console.log('底部导航点击，索引：', index);
    },
    handleBottomNavItemClick(index) {
      // 更新当前索引
      this.bottomNavigationBar.currentIndex = index;
      // 触发事件
      this.$emit('bottom-nav-click', index);
      // 可以在这里添加额外的逻辑
      console.log('自定义底部导航项点击，索引：', index);
    }
  }
}
</script>

自定义顶部导航

<liaction-scaffold 
  :app-bar="appBar"
  :top-navigation="topNavigation"
  @top-nav-click="handleTopNavClick"
>
  <!-- 主内容 -->
  <view class="content">
    <text>这是页面内容</text>
  </view>

  <!-- 自定义顶部导航 -->
  <template #top-nav>
    <view class="custom-top-nav">
      <view 
        v-for="(item, index) in topNavigation.items" 
        :key="item.id"
        class="nav-item"
        :class="{ 'active': topNavigation.currentIndex === index }"
        @click="handleTopNavItemClick(index)"
      >
        <text 
          class="nav-text"
          :style="{
            color: topNavigation.currentIndex === index ? '#007AFF' : '#666666',
            fontWeight: topNavigation.currentIndex === index ? '600' : 'normal'
          }"
        >
          {{ item.text }}
        </text>
      </view>
    </view>
  </template>
</liaction-scaffold>

<style scoped>
.custom-top-nav {
  display: flex;
  align-items: center;
  height: 48px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.nav-item.active {
  border-bottom: 2px solid #007AFF;
}

.nav-text {
  font-size: 14px;
}

</style>

<script>
export default {
  data() {
    return {
      appBar: {
        title: '自定义顶部导航',
        backgroundColor: '#007AFF',
        textColor: '#FFFFFF'
      },
      topNavigation: {
        items: [
          { id: 'all', text: '全部' },
          { id: 'news', text: '新闻' },
          { id: 'sports', text: '体育' },
          { id: 'entertainment', text: '娱乐' },
          { id: 'technology', text: '科技' }
        ],
        currentIndex: 0
      }
    }
  },
  methods: {
    handleTopNavClick(index) {
      console.log('顶部导航点击，索引：', index);
    },
    handleTopNavItemClick(index) {
      // 更新当前索引
      this.topNavigation.currentIndex = index;
      // 触发事件
      this.$emit('top-nav-click', index);
    }
  }
}
</script>

许可证

MIT License