更新记录

1.0.0（2022-01-07） 下载此版本

修复bug，整合调整完善美化，完成模板制作和测试。

平台兼容性

uni-app

其他

lxm-fold-grid是一个全平台前端页面模板，一般用来做个人中心页面模板，也可以做其他页面模板。宫格折叠收起展开+堆叠图片轮播+操作条+头像+胶囊按钮+图标带文字选项卡

组件名：lxm-fold-grid 代码块： lxm-fold-grid

说明

基于Color UI 的宫格，本模板引用插件luyj-grid-link的主要功能包括：

• 按组显示宫格信息。
• 每组可以选择标题是否展示、可以选择背景色。
• 超过一行，自动设置折叠/展开的形式。点击：展开 或折叠按钮显示宫格内容。
• 也可以修改为超过两行自动设置折叠/展开的形式。这个可以修改“luyj-grid-link.vue”文件里的参数。item.colNumber1改为：item.colNumber2。@/common/data/data.js，列表iconsList里图标超过9个，比如12个左右。

安装方式

• 本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。
• 本组件的样式基于ColorUI 。所以，若要使用先依照官网下载并下源码解压，复制根目录的 /colorui 文件夹到你的根目录。然后在App.vue 引入关键Css main.css icon.css。

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>

本模板引用插件luyj-grid-link的基本用法

在 template 中的使用

    <luyj-grid-link :list="list" @gridExc="clickGrid"></luyj-grid-link>

这里 list对应列表数据;@gridExc,对应没有链接属性时，宫格的执行方法,其中e.detail.dataset.exec对应列表中宫格的exec属性。这里引用了数据：

list: [{
            title: '成员管理',
            cur: 'applications',
            bgColor: 'bg-blue light', // 背景颜色
            color: 'blue',
            title_show: false,
            showAll: false,
            colNumber: 3, // 显示的列数
            iconsList: [{
                    cuIcon: 'group_fill',
                    color: 'blue',
                    name: '组织机构',
                    url: '/pages/toUrl/toUrl'
                },
                {
                    cuIcon: 'friendadd',
                    color: 'blue',
                    name: '无URL',
                    exec : 'add'
                },
                {
                    cuIcon: 'friendaddfill',
                    color: 'blue',
                    name: '无Url',
                    exec: 'invite'
                },
            ]
        },
        {
            title: '基础数据',
            cur: 'basic',
            bgColor: '', // 背景颜色
            color: 'blue',
            title_show: true,
            showAll: false,
            colNumber: 5, // 显示的列数
            iconsList: [{
                    cuIcon: 'text',
                    color: 'yellow',
                    name: '基本信息',
                    url: '/pages/toUrl/toUrl'
                },
                {
                    cuIcon: 'peoplelist',
                    color: 'blue',
                    name: '员工管理',
                    url: '/pages/toUrl/toUrl'
                },

            ]
        }, {
            title: '产品目录',
            cur: 'goods',
            bgColor: '', // 背景颜色
            color: 'blue',
            title_show: true,
            showAll: false,
            colNumber: 5, // 显示的列数
            iconsList: [{
                    cuIcon: 'list',
                    color: 'yellow',
                    name: '分类',
                    url: '/pages/toUrl/toUrl'
                },
                {
                    cuIcon: 'goodsnew',
                    color: 'blue',
                    name: '型号',
                    url: '/pages/toUrl/toUrl'
                },
                {
                    cuIcon: 'shake',
                    color: 'olive',
                    name: '设备',
                    url: '/pages/toUrl/toUrl'
                },
                {
                    cuIcon: 'questionfill',
                    color: 'yellow',
                    name: '常见问题',
                    url: '/pages/toUrl/toUrl'
                }
            ]
        },
        {
            title: '权限管理',
            cur: 'goods',
            bgColor: '', // 背景颜色
            color: 'blue',
            title_show: true,
            showAll: false,
            colNumber: 5, // 显示的列数
            iconsList: [{
                cuIcon: 'goodsfill',
                color: 'red',
                name: '权限设置',
                url: '/pages/toUrl/toUrl'
            }]
        }
    ], 

属性说明

list 内对象的参数说明

iconsList 内对象的参数说明

事件说明

传奇开心果模板，名称：lxm-fold-gridV1.0.0,传奇开心果出品，2022.1.6