更新记录

1.0.1（2025-11-12） 下载此版本

1.0.0（2024-06-04）

初始化

1.0.1（2025-11-12）

新增：titleName属性

平台兼容性

uni-app(4.0)

其他

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<hv-menus :dataList="login_menus" @tapItem="handleTapItem"></hv-menus>

设置列数 （3~5列显示效果较好）

<hv-menus :dataList="login_menus" :colNum="3" :scale="0.45" @tapItem="handleTapItem"></hv-menus>

标题嵌入

        <hv-menus :dataList="login_menus" titleType="insert" :colNum="3" :scale="0.45"
    @tapItem="handleTapItem"></hv-menus>

不显示标题左侧的竖块

            <hv-menus :dataList="login_menus" :showLine="false" titleType="insert" :colNum="3" :scale="0.45"
    @tapItem="handleTapItem"></hv-menus>

不显示标题

            <hv-menus :dataList="login_menus" :showTitle="false" titleType="insert" :colNum="3" :scale="0.45"
    @tapItem="handleTapItem"></hv-menus>

export default {
    data() {
        return {
            columnNum: 3,
                login_menus: [
                    {
                        icon: '../../static/menus/彩灯.png',
                        name: '彩灯'
                    },
                    {
                        icon: '../../static/menus/饼干.png',
                        name: '饼干'
                    },
                    {
                        icon: '../../static/menus/圣诞树.png',
                        name: '圣诞树'
                    },
                    {
                        icon: '../../static/menus/礼物.png',
                        name: '礼物'
                    },
                    {
                        icon: '../../static/menus/雪花.png',
                        name: '雪花'
                    },
                    {
                        icon: '../../static/menus/气球.png',
                        name: '气球'
                    },
                    {
                        icon: '../../static/menus/日历.png',
                        name: '日历'
                    },
                    {
                        icon: '../../static/menus/糖果.png',
                        name: '糖果'
                    }
                ]
        }
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '不显示标题'
        })
    },
    methods: {
        handleTapItem(e) {
            console.log(e);
        }
    }
}

API

Props

Events

插件来源

• 本插件基于插件市场进行二次开发，链接地址如下：按钮组，功能按钮，服务功能，buttonGroup

• 如有侵权，联系立删！！！

效果图