更新记录

1.0.2（2024-01-11） 下载此版本

小程序端暂不提供自定义插槽。待解决中。一定需要修改的可以直接修改组件原有样式。

1.0.1（2024-01-02） 下载此版本

新增了两个事件、新增了一个插槽、新增了一个空值属性、新增了参数实例。 具体值参考说明文档

1.0.0（2023-12-28） 下载此版本

首次发布

平台兼容性

基本介绍

xzg-verticalNav是基于colorUi封装的组件。本插件自带了colorUi样式，如果你的项目本身就是基于colorUi开发的，那么可以删除本组件下的样式。 因微信小程序限制，组件内的自定义按钮暂时无法提供。待解决中

引入与使用

import xzgVerticalNav from '@/components/xzg-verticalNav/xzg-verticalNav'

<xzgVerticalNav :data-list="list1" tab-name="type" assIdName="typeId" height="calc(100vh - 375upx - 100upx)" @onClickTab="onClickTab" @onClickItem="onClickItem"/>

/** list属性参考*/
list1 = [{
        "id": 0,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类1",
        "typeId": "1"
    },
    {
        "id": 1,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类1",
        "typeId": "1"
    },
    {
        "id": 2,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类1",
        "typeId": "1"
    },
    {
        "id": 3,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类1",
        "typeId": "1"
    },
    {
        "id": 4,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类1",
        "typeId": "1"
    },
    {
        "id": 5,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类2",
        "typeId": "2"
    },
    {
        "id": 6,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类2",
        "typeId": "2"
    },
    {
        "id": 7,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类2",
        "typeId": "2"
    },
    {
        "id": 8,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类2",
        "typeId": "2"
    },
    {
        "id": 9,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类2",
        "typeId": "2"
    },
    {
        "id": 10,
        "imgUrl": "background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)",
        "title": "柠檬水",
        "remarks": "冰鲜柠檬水",
        "jiage": "4",
        "type": "奶茶分类3",
        "typeId": "3"
    }]

api

props

events

slot

Tips

目前插件还在改进中...各位可以提出需求