更新记录

1.0.2(2024-11-15) 下载此版本

修复问题。

1.0.1(2024-11-15) 下载此版本

修复问题。

1.0.0(2024-11-14) 下载此版本

ljs-bottom-menu,通用底部菜单

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

方便您的同时,请五星、收藏,让好的东西照亮更多深渊中负重前行的代码人。

创作不易,在您方便之际,赞赏作者,我们会更有动力继续下去。

简介

ljs-bottom-menu,通用底部菜单组件。

使用 uni_modules 安装(推荐)

使用 uni_modules 方式安装组件库,可以直接通过插件市场导入,通过右键菜单快速更新组件,不需要引用、注册,直接在页面中使用 ljs-bottom-menu组件。

主参数

参数 类型 必填项 默认值 说明
menuList Array 菜单数据
defaultIndex Number × 0 默认选中菜单的索引值
opts Object × 菜单样式参数
specialButtonF Function × 特殊按钮的处理函数

menuList 对象数据结构

参数 类型 必填项 示例值 默认值 说明
title String 首页 #333 菜单文本。
url String /pages/ljs-bottom-menu/index 菜单跳转地址。
icon String require(url)或base64 默认图标。
iconActive String require(url)或base64 选中图标。
type String × 0 特殊菜单按钮。除0之外都是普通菜单。
parameter String × parameter: { id: undefined } 跳转入参,parameter不可变。

opts参数

参数 类型 必填项 默认值 说明
fontColor String × #333 字体颜色。
fontActiveColor String × #5c70fe 选中字体颜色。
fontSize String × 20rpx 字体大小。
menuBgColor String × #FFF 菜单背景颜色。
menuShadowColor String × rgba(0, 0, 0, .2) 菜单上边沿颜色。

插槽

插槽名 说明

快速应用

示例1
<ljs-bottom-menu
    :menuList="menus"
    :opts="{
        fontColor: '#CCC',
        fontActiveColor: '#1296db',
    }">
</ljs-bottom-menu>
export default {
    data() {
        return {
            menus: [
                {
                    title: '首页',
                    url: '/pages/ljs-bottom-menu/index',
                    icon: require('../assets/images/index.png'),
                    iconActive: require('../assets/images/index_active.png'),
                },
                {
                    title: '发布',
                    url: '/pages/publish/index',
                    icon: require('../assets/images/publish.png'),
                    iconActive: require('../assets/images/publish_active.png'),
                },
                {
                    title: '我的',
                    url: '/pages/my/index',
                    icon: require('../assets/images/my.png'),
                    iconActive: require('../assets/images/my_active.png'),
                },
            ]
        }
    }
}

贡献代码

龙九山。有任何问题,请在平台留言,在手头宽裕得情况下,我会尽快修复问题。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问