更新记录

1.0.0（2025-08-27） 下载此版本

完成第一版

平台兼容性

uni-app(4.07)

Uni-app 底部导航插件

这是一个功能强大的 Uni-app 视频封面截取组件，支持自由拖拽进度截取，并提供自定义配置和事件回调。

安装与使用

1. 将组件代码保存到本地

下载程序包，将提供的 .vue 文件代码保存到你的项目目录中，例如 components/GlobalLayout/GlobalLayout.vue。

2. 在main.js中全局引入并使用

import GlobalLayout from './components/GlobalLayout.vue' // 新增
app.component('GlobalLayout', GlobalLayout)

3. 在App.vue的onLaunch方法中将菜单信息写到公共属性中

  // 默认导航 (也可以将这个写到uni方法中)
        this.globalData.defaultTab = 'home'
        this.globalData.defaultTabs = [
            {
                currentTab: 'home',
                text: '首页',
                class: 'tabbar',
                path: '/pages/index/index',
                icon: '/static/bar_icon/home.png',
                activeIcon: '/static/bar_icon/home-active.png'
            },
            {
                currentTab: 'player',
                text: '视频中心',
                class: 'tabbar',
                path: '/pages/player/index',
                icon: '/static/bar_icon/player.png',
                activeIcon: '/static/bar_icon/player-active.png'
            },
            {
                currentTab: 'middle',
                class: 'middle',
                path: '/pages/push/index',
                icon: '/static/bar_icon/middle.png',
                activeIcon: '/static/bar_icon/middle.png'
            },
            {
                currentTab: 'test',
                text: '自测中心',
                class: 'tabbar',
                path: '/pages/test_appraise/index',
                icon: '/static/bar_icon/test.png',
                activeIcon: '/static/bar_icon/test-active.png'
            },
            {
                currentTab: 'mine',
                text: '个人中心',
                class: 'tabbar',
                path: '/pages/member/index',
                icon: '/static/bar_icon/mine.png',
                activeIcon: '/static/bar_icon/mine-active.png'
            }
        ]

4.在你需要显示底部导航的页面外面加一个global-layout标签包起来即可

  <global-layout>
        <view class="content"> <!--只是做一个示例这一层view可以没有 -->
        <!--这里写你页面的其他内容 -->
        </view>
  </global-layout>

5.禁用系统自带导航pages.json中将tabBar内容注释或者删除掉

    "tabBar": {
        // "color": "#7A7E83",
        // "selectedColor": "#3cc51f",
        // "borderStyle": "black",
        // "backgroundColor": "#ffffff",
        // "list": [
        // .....
        // ]
    }