更新记录

1.0.1（2023-08-28） 下载此版本

修复外部滚动超出页面Bug

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

侧边栏导航，类似美团饿了么外卖商品列表效果，简单易改

平台兼容性

使用方式： 1.在script中引用组件

 import yhuNavigation from "@/components/yhu-navigation/yhu-navigation.vue";
   export default {
     components: {
        yhuNavigation
     },

2.在view中放入组件，在:scPassingArray之后加上自定义数组名(注意数组结构如下一致，如果不一致请过滤成这样)

 <view>
    <yhu-navigation :scPassingArray="UUScDataList" />
 </view>    

3.数据源

 UUScDataList: [{/* UUScDataList为自定义事件名 */
        barId: 0,
        barTitle: "苹果",/* 左边导航栏标题 */
        scContentData: [{
                id: 1,
                name: 'iphone15promax'
            },/* 右边内容每项 */
                ...其他项
        ]
    }]

示例中的数据：

 data() {
    return {
        UUScDataList: [{
                barId: 0,
                barTitle: "苹果",
                scContentData: [{
                        id: 1,
                        name: 'iphone15promax'
                    },
                    {
                        id: 2,
                        name: 'iphone15promax'
                    },
                    {
                        id: 3,
                        name: 'iphone15promax'
                    },
                    {
                        id: 4,
                        name: 'iphone15promax'
                    },
                    {
                        id: 5,
                        name: 'iphone15promax'
                    },
                    {
                        id: 6,
                        name: 'iphone15promax'
                    },
                ]
            },
            {
                barId: 1,
                barTitle: "三星",
                scContentData: [{
                        id: 7,
                        name: 'iphone15promax'
                    },
                    {
                        id: 8,
                        name: 'iphone15promax'
                    },
                    {
                        id: 9,
                        name: 'iphone15promax'
                    },
                    {
                        id: 10,
                        name: 'iphone15promax'
                    },
                    {
                        id: 11,
                        name: 'iphone15promax'
                    },
                    {
                        id: 12,
                        name: 'iphone15promax'
                    },
                ]
            },
            {
                barId: 2,
                barTitle: "华为",
                scContentData: [{
                        id: 13,
                        name: 'iphone15promax'
                    },
                    {
                        id: 14,
                        name: 'iphone15promax'
                    },
                    {
                        id: 15,
                        name: 'iphone15promax'
                    },
                    {
                        id: 16,
                        name: 'iphone15promax'
                    },
                    {
                        id: 17,
                        name: 'iphone15promax'
                    },
                    {
                        id: 18,
                        name: 'iphone15promax'
                    },
                ]
            },
            {
                barId: 3,
                barTitle: "小米",
                scContentData: [{
                        id: 19,
                        name: 'iphone15promax'
                    },
                    {
                        id: 20,
                        name: 'iphone15promax'
                    },
                    {
                        id: 21,
                        name: 'iphone15promax'
                    },
                    {
                        id: 22,
                        name: 'iphone15promax'
                    },
                    {
                        id: 23,
                        name: 'iphone15promax'
                    },
                    {
                        id: 24,
                        name: 'iphone15promax'
                    },
                ]
            },
            {
                barId: 4,
                barTitle: "oppo",
                scContentData: [{
                        id: 25,
                        name: 'iphone15promax'
                    },
                    {
                        id: 26,
                        name: 'iphone15promax'
                    },
                    {
                        id: 27,
                        name: 'iphone15promax'
                    },
                    {
                        id: 28,
                        name: 'iphone15promax'
                    },
                    {
                        id: 29,
                        name: 'iphone15promax'
                    },
                    {
                        id: 30,
                        name: 'iphone15promax'
                    },
                ]
            },
            {
                barId: 5,
                barTitle: "vivo",
                scContentData: [{
                        id: 53,
                        name: 'iphone15promax'
                    },
                    {
                        id: 54,
                        name: 'iphone15promax'
                    },
                    {
                        id: 55,
                        name: 'iphone15promax'
                    },
                    {
                        id: 56,
                        name: 'iphone15promax'
                    },
                    {
                        id: 57,
                        name: 'iphone15promax'
                    },
                    {
                        id: 58,
                        name: 'iphone15promax'
                    },
                    {
                        id: 59,
                        name: 'iphone15promax'
                    },
                    {
                        id: 60,
                        name: 'iphone15promax'
                    },
                    {
                        id: 61,
                        name: 'iphone15promax'
                    },
                    {
                        id: 62,
                        name: 'iphone15promax'
                    },
                    {
                        id: 63,
                        name: 'iphone15promax'
                    },
                    {
                        id: 64,
                        name: 'iphone15promax'
                    },
                    {
                        id: 65,
                        name: 'iphone15promax'
                    },
                    {
                        id: 66,
                        name: 'iphone15promax'
                    },
                    {
                        id: 67,
                        name: 'iphone15promax'
                    },
                    {
                        id: 68,
                        name: 'iphone15promax'
                    },
                    {
                        id: 69,
                        name: 'iphone15promax'
                    },
                    {
                        id: 70,
                        name: 'iphone15promax'
                    },
                    {
                        id: 71,
                        name: 'iphone15promax'
                    },
                    {
                        id: 72,
                        name: 'iphone15promax'
                    },
                    {
                        id: 73,
                        name: 'iphone15promax'
                    },
                    {
                        id: 74,
                        name: 'iphone15promax'
                    },
                    {
                        id: 75,
                        name: 'iphone15promax'
                    },
                    {
                        id: 76,
                        name: 'iphone15promax'
                    },
                    {
                        id: 77,
                        name: 'iphone15promax(结束)'
                    },
                ]
            },
        ],
    }
 }