更新记录

1.0.5（2023-06-14） 下载此版本

修改示例

1.0.4（2023-06-10） 下载此版本

增加预览二维码

1.0.3（2023-06-10） 下载此版本

增加预览二维码

平台兼容性

uni-app

liu-slide-menu适用于uni-app项目的页面 图文menu宫格导航自定义组件

本组件目前兼容微信小程序、H5

本组件支持小程序和H5 图文宫格导航、menu导航、自动切换宫格菜单

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

<!-- isSlided 为true -->
<liu-slide-menu :menuList="menuList" :imgHeight="84" isSlided :rowNum="1" :indicatorActiveColor="'#3A76EE'" @clickItem="clickItem"></liu-slide-menu>

export default {
    data() {
        return {
            menuList:[{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo1.png',
                name: '头像1',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo2.png',
                name: '头像2',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo3.png',
                name: '头像3',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo4.png',
                name: '头像4',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo5.png',
                name: '头像5',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo6.png',
                name: '头像6',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo7.png',
                name: '头像7',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo8.png',
                name: '头像8',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo7.png',
                name: '头像9',
            },{
                url: 'https://cdn.jsdelivr.net/gh/ckcoding/PICS/PicGo8.png',
                name: '头像10',
            }]
        };
    },
    methods: {
        //点击单独某一个宫格
        clickItem(item){
            console.log('item', item)
            //拿到当前点击item对象  执行自己的业务逻辑
        }
    }
}

属性说明