fastadmin使用Uniapp开发移动端自定义底部菜单

admin · 发表于 2026-6-24 11:22:49

数据表：

CREATE TABLE `fa_eshop_footbar` (
`id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID',
`weigh` int(11) NOT NULL DEFAULT '0' COMMENT '排序',
`name` varchar(30) NOT NULL COMMENT '名称',
`image` varchar(200) NOT NULL COMMENT '图标',
`act_image` varchar(200) NOT NULL COMMENT '选定图标',
`color` varchar(30) NOT NULL COMMENT '文字颜色',
`act_color` varchar(30) NOT NULL COMMENT '选定文字颜色',
`showtext` enum('1','0') NOT NULL DEFAULT '1' COMMENT '显示文字:1=是,0=否',
`sizetype` enum('1','2') NOT NULL DEFAULT '1' COMMENT '图标尺寸:1=正常,2=放大',
`linktype` enum('1','2','3') NOT NULL DEFAULT '1' COMMENT '点击类型:1=跳转页面,2=弹窗,提醒3=跳小程序',
`pathtype` enum('0','1','2','3','4','5') NOT NULL DEFAULT '0' COMMENT '页面路径:0=首页,1=骑行,2=代理,3=我的,4=其他,5=订单',
`linkpath` varchar(255) DEFAULT NULL COMMENT '路径地址',
`icontext` varchar(255) DEFAULT '' COMMENT '非页面路径',
`status` enum('1','0') NOT NULL DEFAULT '1' COMMENT '状态:1=显示,0=隐藏',
`createtime` int(16) NOT NULL COMMENT '添加时间',
`updatetime` int(16) NOT NULL COMMENT '更新时间',
`deletetime` int(16) DEFAULT NULL COMMENT '删除时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='底部菜单表';
--
-- 转存表中的数据 `fa_eshop_footbar`
--
INSERT INTO `fa_eshop_footbar` (`id`, `weigh`, `name`, `image`, `act_image`, `color`, `act_color`, `showtext`, `sizetype`, `linktype`, `pathtype`, `linkpath`, `icontext`, `status`, `createtime`, `updatetime`, `deletetime`) VALUES
(1, 3, '设备状态', '/uploads/20260602/7aa4b291de6feed7cb895cb19dfdb391.png', '/uploads/20260602/7aa4b291de6feed7cb895cb19dfdb391.png', '#8a8a8a', '#002fa7', '1', '2', '1', '1', '/pages/travel/index', '', '1', 1778485086, 1781445310, NULL),
(2, 6, '首页', '/uploads/20260617/a62ec65765173fdcc3b859d90404f84f.png', '/uploads/20260617/a54432ee26e163a941def3532a69812c.png', '#8a8a8a', '#ff6600', '1', '1', '1', '0', '/pages/index/index', '', '1', 1778485119, 1782270062, NULL),
(3, 1, '个人中心', '/uploads/20260617/6a1c82080a57d242d0015720a8487ddc.png', '/uploads/20260617/abd0270c07beade4f2308f86c2536445.png', '#8a8a8a', '#ff6600', '1', '1', '1', '3', '/pages/user/index', '', '1', 1778485141, 1782270068, NULL),
(4, 2, '代理入口', '/uploads/20260527/83e887840f19b91d371f5a713079ebb4.png', '/uploads/20260527/83e887840f19b91d371f5a713079ebb4.png', '#8a8a8a', '#ff6600', '1', '1', '1', '2', '/pages/agent/index', '', '0', 1778489782, 1782270374, NULL),
(6, 4, '积分商城', '/uploads/20260617/9f1395e5d7e542eaa24b51c64f71b603.png', '/uploads/20260617/9f1395e5d7e542eaa24b51c64f71b603.png', '#8a8a8a', '#ff6600', '1', '1', '1', '5', '/pages/order/index', '', '0', 1779874724, 1782270369, NULL);

复制代码

前端后台代码：

// 返回值
$return = [
'copyright' => $config['copyright'],
'date' => date('Y-m-d'),
'footbars' => [],
'footbar_width' => '',
'tabIndex' => 0,
'footbar_switch' => 0,
'noshowtext' => 0
];
// 底部菜单
$footbars = Footbar::where('status', 1)->order('weigh', 'desc')->limit(0, 5)->select();
if (!empty($footbars)) {
// 数量
$total = count($footbars);
if ($total < 2 || $total > 5) {
$this->error('底部菜单数量只能2-5个');
}
if ($total == 2) {
$return['footbar_width'] = '50%';
} elseif ($total == 3) {
$return['footbar_width'] = '33.33%';
} elseif ($total == 4) {
$return['footbar_width'] = '25%';
} elseif ($total == 5) {
$return['footbar_width'] = '20%';
}
// 遍历
foreach ($footbars as $index => &$item) {
$item->imageUrl = cdnurl($item->image, true);
$item->act_imageUrl = cdnurl($item->act_image, true);
if ($item->pathtype == 2) {
$return['tabIndex'] = $index;
$return['footbar_switch'] = 1;
}
// 不显示文字
if ($item->showtext == 0) {
$return['noshowtext'] = 1;
}
}
unset($item);
$return['footbars'] = $footbars;
}
$this->success('请求成功', $return);

复制代码

uniapp前端代码：

<view class="nui-footbar" v-if="footbar_switch == 1">
<view class="nui-footbar-item" :style="{width: footbar_width}" v-for="(item, index) in footbars" :key="index" @click="tabbar(index)">
<image :src="tabIndex==index?item.act_imageUrl:item.imageUrl" :class="item.sizetype==1?'nui-footbar-image':'nui-footbar-image-large'" mode="widthFix"></image>
<text class="nui-tabname" :style="tabIndex==index?'color:'+item.act_color:item.color" v-if="item.showtext==1">{{item.name}}</text>
</view>
</view>

复制代码

uniapp前端样式表：

/* 底部菜单 */
.nui-footbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10rpx 20rpx;
background-color: #ffffff;
border-top: 1px solid #ccc;
display: flex;
/* justify-content: space-between;
align-items: center; */
flex-direction: row;
align-items: flex-end;
/* #ifdef MP */
padding-top: 16rpx;
padding-bottom: 0;
/* #endif */
z-index: 999;
}
.nui-footbar-item {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: env(safe-area-inset-bottom);
}
.nui-footbar-image {
width: 60rpx;
height: auto;
display: block;
}
.nui-footbar-image-large {
width: 100rpx;
height: auto;
display: block;
}
.nui-tabname {
font-size: 28rpx;
}

复制代码

uniapp返回数据代码：

footbar_switch: 0,
footbar_width: '0%',
footbars: [],
tabIndex: 0,

复制代码

uniapp方法：

// 底部菜单
tabbar(index) {
// console.log(index)
let footbars = this.footbars;
// console.log(footbars[index])
// 首页
if (index == this.tabIndex) {
return;
} else {
// 跳转页面
if (footbars[index].linktype==1) {
uni.reLaunch({
url: footbars[index].linkpath
})
} else if (footbars[index].linktype==2) {
// 弹窗提示
uni.showModal({
title: '提示',
content: footbars[index].icontext?footbars[index].icontext:'未配置提示内容',
showCancel: false
})
} else {
// 跳转小程序
uni.navigateToMiniProgram({
appId: footbars[index].icontext,
// envVersion: 'trial',
// release: 正式版 trial: 体验版
success: (res) => {
console.log('res')
},
fail: (res) => {
console.log('res')
}
})
}
}
},

复制代码

fastadmin使用Uniapp开发移动端自定义底部菜单

浏览过的版块