当前位置: article > 正文

uniapp微信小程序实现左侧菜单右侧列表双向联动的效果_uniapp左侧菜单栏

作者：在线问答5 | 2024-07-02 10:44:50

踩

uniapp左侧菜单栏

uniapp微信小程序实现左侧菜单右侧列表双向联动的效果

左侧类别，右侧商品，点击左侧按钮右侧滚动

原博客有bug，本篇修复后的：https://www.cnblogs.com/hs20011205/p/17791887.html
前几个类别商品数量少有bug

<template>
    <view class="u-wrap">
        <view class="u-search-box">
            <view class="u-search-inner">
                <u-icon name="search" color="#909399" :size="28"></u-icon>
                <text class="u-search-text">搜索</text>
            </view>
        </view>
        <view class="u-menu-wrap">
            <scroll-view style="height: 800rpx;" scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
             :scroll-into-view="itemId">
                <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
                 @tap.stop="swichMenu(index)">
                    <text class="u-line-1">{{item.name}}</text>
                </view>
            </scroll-view>
            <scroll-view style="height: 800rpx;" :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
                <view class="page-view">
                    <view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
                        <view class="item-title">
                            <text>{{item.name}}</text>
                        </view>
                        <view class="item-container">
                            <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
                                <image class="item-menu-image" :src="item1.icon" mode=""></image>
                                <view class="item-menu-name">{{item1.name}}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
    import classifyData from '@/common/classify.js';
    export default {
        data() {
            return {
                scrollTop: 0, //tab标题的滚动条位置
                oldScrollTop: 0,
                current: 0, // 预设当前项的值
                menuHeight: 0, // 左边菜单的高度
                menuItemHeight: 0, // 左边菜单item的高度
                itemId: '', // 栏目右边scroll-view用于滚动的id
                tabbar: classifyData,
                menuItemPos: [],
                arr: [],
                scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
                timer: null, // 定时器
                
            }
        },
        onLoad(option) {

        },
        onReady() {
            this.getMenuItemTop()
        },
        methods: {
            // 点击左边的栏目切换
            async swichMenu(index) {
                if(this.arr.length == 0) {
                    await this.getMenuItemTop();
                }
                if (index == this.current) return;
                this.scrollRightTop = this.oldScrollTop;
                this.$nextTick(function(){
                    this.scrollRightTop = this.arr[index];
                    this.current = index;
                    this.leftMenuStatus(index);
                })
            },
            // 获取一个目标元素的高度
            getElRect(elClass, dataVal) {
                new Promise((resolve, reject) => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('.' + elClass).fields({
                        size: true
                    }, res => {
                        // 如果节点尚未生成，res值为null，循环调用执行
                        if (!res) {
                            setTimeout(() => {
                                this.getElRect(elClass);
                            }, 10);
                            return;
                        }
                        this[dataVal] = res.height;
                        resolve();
                    }).exec();
                })
            },
            // 观测元素相交状态
            async observer() {
                this.tabbar.map((val, index) => {
                    let observer = uni.createIntersectionObserver(this);
                    // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
                    // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
                    observer.relativeTo('.right-box', {
                        top: 0
                    }).observe('#item' + index, res => {
                        if (res.intersectionRatio > 0) {
                            let id = res.id.substring(4);
                            this.leftMenuStatus(id);
                        }
                    })
                })
            },
            // 设置左边菜单的滚动状态
            async leftMenuStatus(index) {
                this.current = index;
                // 如果为0，意味着尚未初始化
                if (this.menuHeight == 0 || this.menuItemHeight == 0) {
                    await this.getElRect('menu-scroll-view', 'menuHeight');
                    await this.getElRect('u-tab-item', 'menuItemHeight');
                }
                // 将菜单活动item垂直居中
                this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
            },
            // 获取右边菜单每个item到顶部的距离
            getMenuItemTop() {
                new Promise(resolve => {
                    let selectorQuery = uni.createSelectorQuery().in(this);
                    selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
                        // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
                        if(!rects.length) {
                            setTimeout(() => {
                                this.getMenuItemTop();
                            }, 10);
                            return ;
                        }
                        rects.forEach((rect) => {
                            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
                            this.arr.push(rect.top - rects[0].top);
                            resolve();
                        })
                    }).exec()
                })
            },
            // 右边菜单滚动
            async rightScroll(e) {
                this.oldScrollTop = e.detail.scrollTop;
                if(this.arr.length == 0) {
                    await this.getMenuItemTop();
                }
                if(this.timer) return ;
                if(!this.menuHeight) {
                    await this.getElRect('menu-scroll-view', 'menuHeight');
                }
                setTimeout(() => { // 节流
                    this.timer = null;
                    // scrollHeight为右边菜单垂直中点位置
                    let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
                    for (let i = 0; i < this.arr.length; i++) {
                        let height1 = this.arr[i];
                        let height2 = this.arr[i + 1];
                        // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
                        if (height1 < 300){
							return;
						}
                        if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
                            this.leftMenuStatus(i);
                            return ;
                        }
                    }
                }, 10)
            }
        }
    }
</script>
 
<style scoped>
    .u-wrap {
        height: calc(100vh);
        /* #ifdef H5 */
        height: calc(100vh - var(--window-top));
        /* #endif */
        display: flex;
        flex-direction: column;
    }
 
    .u-search-box {
        padding: 18rpx 30rpx;
    }
 
    .u-menu-wrap {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
 
    .u-search-inner {
        background-color: rgb(234, 234, 234);
        border-radius: 100rpx;
        display: flex;
        align-items: center;
        padding: 10rpx 16rpx;
    }
 
    .u-search-text {
        font-size: 26rpx;
        color: $u-tips-color;
        margin-left: 10rpx;
    }
 
    .u-tab-view {
        width: 200rpx;
        height: 100%;
    }
 
    .u-tab-item {
        height: 110rpx;
        background: #f6f6f6;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #444;
        font-weight: 400;
        line-height: 1;
    }
 
    .u-tab-item-active {
        position: relative;
        color: #000;
        font-size: 30rpx;
        font-weight: 600;
        background: #fff;
    }
 
    .u-tab-item-active::before {
        content: "";
        position: absolute;
        border-left: 4px solid $u-type-primary;
        height: 32rpx;
        left: 0;
        top: 39rpx;
    }
 
    .u-tab-view {
        height: 100%;
    }
 
    .right-box {
        background-color: rgb(250, 250, 250);
    }
 
    .page-view {
        padding: 16rpx;
    }
 
    .class-item {
        margin-bottom: 30rpx;
        background-color: #fff;
        padding: 16rpx;
        border-radius: 8rpx;
    }
 
    .class-item:last-child {
        min-height: 100vh;
    }
 
    .item-title {
        font-size: 26rpx;
        color: $u-main-color;
        font-weight: bold;
    }
 
    .item-menu-name {
        font-weight: normal;
        font-size: 24rpx;
        color: $u-main-color;
    }
 
    .item-container {
        display: flex;
        flex-wrap: wrap;
    }
 
    .thumb-box {
        width: 33.333333%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 20rpx;
    }
 
    .item-menu-image {
        width: 120rpx;
        height: 120rpx;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294

在uni-app的common文件夹下新建classify.js 文件
export default[
{
“name”: “女装”,
“foods”: [
{
“name”: “A字裙”,
“key”: “A字裙”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/1.jpg”,
“cat”: 10
},
{
“name”: “T恤”,
“key”: “T恤”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/2.jpg”,
“cat”: 10
},
{
“name”: “半身裙”,
“key”: “半身裙”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/3.jpg”,
“cat”: 10
},
{
“name”: “衬衫”,
“key”: “衬衫”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/4.jpg”,
“cat”: 10
},
{
“name”: “短裙”,
“key”: “短裙”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/5.jpg”,
“cat”: 10
},
{
“name”: “阔腿裤”,
“key”: “阔腿裤”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/6.jpg”,
“cat”: 10
},
{
“name”: “连衣裙”,
“key”: “连衣裙”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/7.jpg”,
“cat”: 10
},
{
“name”: “妈妈装”,
“key”: “妈妈装”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/8.jpg”,
“cat”: 10
},
{
“name”: “牛仔裤”,
“key”: “牛仔裤”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/9.jpg”,
“cat”: 10
},
{
“name”: “情侣装”,
“key”: “情侣装”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/10.jpg”,
“cat”: 10
},
{
“name”: “休闲裤”,
“key”: “休闲裤”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/11.jpg”,
“cat”: 10
},
{
“name”: “雪纺衫”,
“key”: “雪纺衫”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/12.jpg”,
“cat”: 10
},
{
“name”: “防晒衣”,
“key”: “防晒衣”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/13.jpg”,
“cat”: 10
},
{
“name”: “礼服/婚纱”,
“key”: “礼服婚纱”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/1/14.jpg”,
“cat”: 10
}
]
},
{
“name”: “美食”,
“foods”: [
{
“name”: “火锅”,
“key”: “火锅”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/1.jpg”,
“cat”: 6
},
{
“name”: “糕点饼干”,
“key”: “糕点饼干”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/2.jpg”,
“cat”: 6
},
{
“name”: “坚果果干”,
“key”: “坚果果干”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/3.jpg”,
“cat”: 6
},
{
“name”: “酒类”,
“key”: “酒类”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/4.jpg”,
“cat”: 6
},
{
“name”: “辣条”,
“key”: “辣条”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/5.jpg”,
“cat”: 6
},
{
“name”: “大礼包”,
“key”: “大礼包”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/6.jpg”,
“cat”: 6
},
{
“name”: “精品茗茶”,
“key”: “茶”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/7.jpg”,
“cat”: 6
},
{
“name”: “休闲食品”,
“key”: “休闲食品”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/8.jpg”,
“cat”: 6
},
{
“name”: “糖果巧克力”,
“key”: “糖果巧克力”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/9.jpg”,
“cat”: 6
},
{
“name”: “方便速食”,
“key”: “方便速食”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/10.jpg”,
“cat”: 6
},
{
“name”: “营养代餐”,
“key”: “营养代餐”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/11.jpg”,
“cat”: 6
},
{
“name”: “粮油副食”,
“key”: “粮油”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/12.jpg”,
“cat”: 6
},
{
“name”: “生鲜水果”,
“key”: “水果”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/13.jpg”,
“cat”: 6
},
{
“name”: “饮品”,
“key”: “饮品”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/2/14.jpg”,
“cat”: 6
}
]
},
{
“name”: “美妆”,
“foods”: [
{
“name”: “化妆刷”,
“key”: “化妆刷”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/1.jpg”,
“cat”: 3
},
{
“name”: “粉底”,
“key”: “粉底”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/2.jpg”,
“cat”: 3
},
{
“name”: “洗发护发”,
“key”: “洗发护发”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/3.jpg”,
“cat”: 3
},
{
“name”: “美容工具”,
“key”: “美容工具”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/4.jpg”,
“cat”: 3
},
{
“name”: “眼部护理”,
“key”: “眼部护理”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/5.jpg”,
“cat”: 3
},
{
“name”: “眉妆”,
“key”: “眉妆”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/6.jpg”,
“cat”: 3
},
{
“name”: “卸妆品”,
“key”: “卸妆品”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/7.jpg”,
“cat”: 3
},
{
“name”: “基础护肤”,
“key”: “基础护肤”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/8.jpg”,
“cat”: 3
},
{
“name”: “眼妆”,
“key”: “眼妆”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/9.jpg”,
“cat”: 3
},
{
“name”: “唇妆”,
“key”: “唇妆”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/10.jpg”,
“cat”: 3
},
{
“name”: “面膜”,
“key”: “面膜”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/11.jpg”,
“cat”: 3
},
{
“name”: “沐浴用品”,
“key”: “沐浴用品”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/12.jpg”,
“cat”: 3
},
{
“name”: “护肤套装”,
“key”: “护肤套装”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/13.jpg”,
“cat”: 3
},
{
“name”: “防晒品”,
“key”: “防晒品”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/14.jpg”,
“cat”: 3
},
{
“name”: “美甲”,
“key”: “美甲”,
“icon”: “https://cdn.uviewui.com/uview/common/classify/3/15.jpg”,
“cat”: 3
}

    ]
},
{
    "name": "居家日用",
    "foods": [
        {
          "name": "垃圾袋",
          "key": "垃圾袋",
          "icon": "https://cdn.uviewui.com/uview/common/classify/4/1.jpg",
          "cat": 4
        },
        {
            "name": "纸巾",
            "key": "纸巾",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/2.jpg",
            "cat": 4
        },
        {
            "name": "驱蚊用品",
            "key": "驱蚊用品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/3.jpg",
            "cat": 4
        },
        {
            "name": "收纳神器",
            "key": "收纳神器",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/4.jpg",
            "cat": 4
        },
        {
            "name": "厨房用品",
            "key": "厨房用品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/5.jpg",
            "cat": 4
        },
        {
            "name": "厨房烹饪",
            "key": "烹饪",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/6.jpg",
            "cat": 4
        },
        {
            "name": "衣物晾晒",
            "key": "衣物晾晒",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/7.jpg",
            "cat": 4
        },
        {
            "name": "衣物护理",
            "key": "衣物护理",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/8.jpg",
            "cat": 4
        },
        {
            "name": "宠物用品",
            "key": "宠物用品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/9.jpg",
            "cat": 4
        },
        {
            "name": "医药保健",
            "key": "医药",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/10.jpg",
            "cat": 4
        },
        {
            "name": "日用百货",
            "key": "百货",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/11.jpg",
            "cat": 4
        },
        {
            "name": "清洁用品",
            "key": "清洁",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/12.jpg",
            "cat": 4
        },
        {
            "name": "绿植园艺",
            "key": "绿植",
            "icon": "https://cdn.uviewui.com/uview/common/classify/4/13.jpg",
            "cat": 4
        }
    ]
},
{
    "name": "男装",
    "foods": [
        {
            "name": "爸爸装",
            "key": "爸爸装",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/1.jpg",
            "cat": 12
        },
        {
            "name": "牛仔裤",
            "key": "牛仔裤",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/2.jpg",
            "cat": 12
        },
        {
            "name": "衬衫",
            "key": "衬衫",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/3.jpg",
            "cat": 12
        },
        {
            "name": "休闲裤",
            "key": "休闲裤",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/4.jpg",
            "cat": 12
        },
        {
            "name": "外套",
            "key": "外套",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/5.jpg",
            "cat": 12
        },
        {
            "name": "T恤",
            "key": "T恤",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/6.jpg",
            "cat": 12
        },
        {
            "name": "套装",
            "key": "套装",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/7.jpg",
            "cat": 12
        },
        {
            "name": "运动裤",
            "key": "运动裤",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/8.jpg",
            "cat": 12
        },
        {
            "name": "马甲/背心",
            "key": "马甲背心",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/9.jpg",
            "cat": 12
        },
        {
            "name": "POLO衫",
            "key": "POLO衫",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/10.jpg",
            "cat": 12
        },
        {
            "name": "商务装",
            "key": "商务装",
            "icon": "https://cdn.uviewui.com/uview/common/classify/5/11.jpg",
            "cat": 12
        }
    ]
},
{
    "name": "鞋品",
    "foods": [
        {
            "name": "单鞋",
            "key": "单鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/1.jpg",
            "cat": 5
        },
        {
            "name": "皮鞋",
            "key": "皮鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/2.jpg",
            "cat": 5
        },
        {
            "name": "帆布鞋",
            "key": "帆布鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/3.jpg",
            "cat": 5
        },
        {
            "name": "北京老布鞋",
            "key": "北京老布鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/4.jpg",
            "cat": 5
        },
        {
            "name": "运动鞋",
            "key": "运动鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/5.jpg",
            "cat": 5
        },
        {
            "name": "拖鞋",
            "key": "拖鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/6.jpg",
            "cat": 5
        },
        {
            "name": "凉鞋",
            "key": "凉鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/7.jpg",
            "cat": 5
        },
        {
            "name": "休闲鞋",
            "key": "休闲鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/8.jpg",
            "cat": 5
        },
        {
            "name": "高跟鞋",
            "key": "高跟鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/9.jpg",
            "cat": 5
        },
        {
            "name": "老人鞋",
            "key": "老人鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/10.jpg",
            "cat": 5
        },
        {
            "name": "懒人鞋",
            "key": "懒人鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/6/11.jpg",
            "cat": 5
        }
    ]
},
{
    "name": "数码家电",
    "foods": [
        {
            "name": "数据线",
            "key": "数据线",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/1.jpg",
            "cat": 8
        },
        {
            "name": "耳机",
            "key": "耳机",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/2.jpg",
            "cat": 8
        },
        {
            "name": "生活家电",
            "key": "家电",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/3.jpg",
            "cat": 8
        },
        {
            "name": "电风扇",
            "key": "电风扇",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/4.jpg",
            "cat": 8
        },
        {
            "name": "电吹风",
            "key": "电吹风",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/5.jpg",
            "cat": 8
        },
        {
            "name": "手机壳",
            "key": "手机壳",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/6.jpg",
            "cat": 8
        },
        {
            "name": "榨汁机",
            "key": "榨汁机",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/7.jpg",
            "cat": 8
        },
        {
            "name": "小家电",
            "key": "小家电",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/8.jpg",
            "cat": 8
        },
        {
            "name": "数码电子",
            "key": "数码",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/9.jpg",
            "cat": 8
        },
        {
            "name": "电饭锅",
            "key": "电饭锅",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/10.jpg",
            "cat": 8
        },
        {
            "name": "手机支架",
            "key": "手机支架",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/11.jpg",
            "cat": 8
        },
        {
            "name": "剃须刀",
            "key": "剃须刀",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/12.jpg",
            "cat": 8
        },
        {
            "name": "充电宝",
            "key": "充电宝",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/13.jpg",
            "cat": 8
        },
        {
            "name": "手机配件",
            "key": "手机配件",
            "icon": "https://cdn.uviewui.com/uview/common/classify/7/14.jpg",
            "cat": 8
        }
    ]
},
{
    "name": "母婴",
    "foods": [
        {
          "name": "婴童服饰",
          "key": "衣服",
          "icon": "https://cdn.uviewui.com/uview/common/classify/8/1.jpg",
          "cat": 2  
        },
        {
            "name": "玩具乐器",
            "key": "玩具乐器",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/2.jpg",
            "cat": 2  
        },
        {
            "name": "尿不湿",
            "key": "尿不湿",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/3.jpg",
            "cat": 2  
        },
        {
            "name": "安抚牙胶",
            "key": "安抚牙胶",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/4.jpg",
            "cat": 2  
        },
        {
            "name": "奶瓶奶嘴",
            "key": "奶瓶奶嘴",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/5.jpg",
            "cat": 2  
        },
        {
            "name": "孕妈用品",
            "key": "孕妈用品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/6.jpg",
            "cat": 2  
        },
        {
            "name": "宝宝用品",
            "key": "宝宝用品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/7.jpg",
            "cat": 2  
        },
        {
            "name": "婴童湿巾",
            "key": "湿巾",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/8.jpg",
            "cat": 2  
        },
        {
            "name": "喂养洗护",
            "key": "洗护",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/9.jpg",
            "cat": 2  
        },
        {
            "name": "婴童鞋靴",
            "key": "童鞋",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/10.jpg",
            "cat": 2  
        },
        {
            "name": "口水巾",
            "key": "口水巾",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/11.jpg",
            "cat": 2  
        },
        {
            "name": "营养辅食",
            "key": "营养",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/12.jpg",
            "cat": 2  
        },
        {
            "name": "婴幼书籍",
            "key": "书籍",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/13.jpg",
            "cat": 2  
        },
        {
            "name": "婴儿车",
            "key": "婴儿车",
            "icon": "https://cdn.uviewui.com/uview/common/classify/8/14.jpg",
            "cat": 2  
        }
    ]
},
{
    "name": "箱包",
    "foods": [
        {
            "name": "单肩包",
            "key": "单肩包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/1.jpg",
            "cat": 0
        },
        {
            "name": "斜挎包",
            "key": "斜挎包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/2.jpg",
            "cat": 0
        },
        {
            "name": "女包",
            "key": "女包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/3.jpg",
            "cat": 0
        },
        {
            "name": "男包",
            "key": "男包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/4.jpg",
            "cat": 0
        },
        {
            "name": "双肩包",
            "key": "双肩包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/5.jpg",
            "cat": 0
        },
        {
            "name": "小方包",
            "key": "小方包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/6.jpg",
            "cat": 0
        },
        {
            "name": "钱包",
            "key": "钱包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/7.jpg",
            "cat": 0
        },
        {
            "name": "旅行箱包",
            "key": "旅行箱包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/8.jpg",
            "cat": 0
        },
        {
            "name": "零钱包",
            "key": "零钱包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/9.jpg",
            "cat": 0
        },
        {
            "name": "手提包",
            "key": "手提包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/10.jpg",
            "cat": 0
        },
        {
            "name": "胸包",
            "key": "胸包",
            "icon": "https://cdn.uviewui.com/uview/common/classify/9/11.jpg",
            "cat": 0
        }
    ]
},
{
    "name": "内衣",
    "foods": [
        {
            "name": "袜子",
            "key": "袜子",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/1.jpg",
            "cat": 11
        },
        {
            "name": "吊带背心",
            "key": "吊带背心",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/2.jpg",
            "cat": 11
        },
        {
            "name": "抹胸",
            "key": "抹胸",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/3.jpg",
            "cat": 11
        },
        {
            "name": "内裤",
            "key": "内裤",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/4.jpg",
            "cat": 11
        },
        {
            "name": "文胸",
            "key": "文胸",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/5.jpg",
            "cat": 11
        },
        {
            "name": "文胸套装",
            "key": "文胸套装",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/6.jpg",
            "cat": 11
        },
        {
            "name": "打底塑身",
            "key": "打底塑身",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/7.jpg",
            "cat": 11
        },
        {
            "name": "家居服",
            "key": "家居服",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/8.jpg",
            "cat": 11
        },
        {
            "name": "船袜",
            "key": "船袜",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/9.jpg",
            "cat": 11
        },
        {
            "name": "情侣睡衣",
            "key": "情侣睡衣",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/10.jpg",
            "cat": 11
        },
        {
            "name": "丝袜",
            "key": "丝袜",
            "icon": "https://cdn.uviewui.com/uview/common/classify/10/11.jpg",
            "cat": 11
        }
    ]
},
{
    "name": "文娱车品",
    "foods": [
        {
            "name": "车市车品",
            "key": "车市车品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/1.jpg",
            "cat": 7
        },
        {
            "name": "办公文具",
            "key": "办公文具",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/2.jpg",
            "cat": 7
        },
        {
            "name": "考试必备",
            "key": "考试必备",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/3.jpg",
            "cat": 7
        },
        {
            "name": "笔记本",
            "key": "笔记本",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/4.jpg",
            "cat": 7
        },
        {
            "name": "艺术礼品",
            "key": "礼品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/5.jpg",
            "cat": 7
        },
        {
            "name": "书写工具",
            "key": "书写工具",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/6.jpg",
            "cat": 7
        },
        {
            "name": "车载电器",
            "key": "车载电器",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/7.jpg",
            "cat": 7
        },
        {
            "name": "图书音像",
            "key": "图书音像",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/8.jpg",
            "cat": 7
        },
        {
            "name": "画具画材",
            "key": "画具画材",
            "icon": "https://cdn.uviewui.com/uview/common/classify/11/9.jpg",
            "cat": 7
        }
    ]
},
{
    "name": "配饰",
    "foods": [
        {
            "name": "太阳镜",
            "key": "太阳镜",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/1.jpg",
            "cat": 0
        },
        {
            "name": "皮带",
            "key": "皮带",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/2.jpg",
            "cat": 0
        },
        {
            "name": "棒球帽",
            "key": "棒球帽",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/3.jpg",
            "cat": 0
        },
        {
            "name": "手表",
            "key": "手表",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/4.jpg",
            "cat": 0
        },
        {
            "name": "发饰",
            "key": "发饰",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/5.jpg",
            "cat": 0
        },
        {
            "name": "项链",
            "key": "项链",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/6.jpg",
            "cat": 0
        },
        {
            "name": "手饰",
            "key": "手饰",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/7.jpg",
            "cat": 0
        },
        {
            "name": "耳环",
            "key": "耳环",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/8.jpg",
            "cat": 0
        },
        {
            "name": "帽子丝巾",
            "key": "帽子丝巾",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/9.jpg",
            "cat": 0
        },
        {
            "name": "眼镜墨镜",
            "key": "眼镜墨镜",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/10.jpg",
            "cat": 0
        },
        {
            "name": "发带发箍",
            "key": "发带发箍",
            "icon": "https://cdn.uviewui.com/uview/common/classify/12/11.jpg",
            "cat": 0
        }
    ]
},
{
    "name": "家装家纺",
    "foods": [
        {
            "name": "家居饰品",
            "key": "家居饰品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/1.jpg",
            "cat": 0
        },
        {
            "name": "凉席",
            "key": "凉席",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/2.jpg",
            "cat": 0
        },
        {
            "name": "背枕靠枕",
            "key": "靠枕",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/3.jpg",
            "cat": 0
        },
        {
            "name": "床上用品",
            "key": "床上用品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/4.jpg",
            "cat": 0
        },
        {
            "name": "摆件",
            "key": "摆件",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/5.jpg",
            "cat": 0
        },
        {
            "name": "四件套",
            "key": "四件套",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/6.jpg",
            "cat": 0
        },
        {
            "name": "装饰品",
            "key": "装饰品",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/7.jpg",
            "cat": 0
        },
        {
            "name": "卫浴用品",
            "key": "卫浴",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/8.jpg",
            "cat": 0
        },
        {
            "name": "家居家装",
            "key": "家具",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/9.jpg",
            "cat": 0
        },
        {
            "name": "蚊帐",
            "key": "蚊帐",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/10.jpg",
            "cat": 0
        },
        {
            "name": "墙纸贴纸",
            "key": "墙纸",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/11.jpg",
            "cat": 0
        },
        {
            "name": "空调被",
            "key": "空调被",
            "icon": "https://cdn.uviewui.com/uview/common/classify/13/12.jpg",
            "cat": 0
        }
    ]
},
{
    "name": "户外运动",
    "foods": [
        {
            "name": "游泳装备",
            "key": "游泳",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/1.jpg",
            "cat": 0
        },
        {
            "name": "泳镜",
            "key": "泳镜",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/2.jpg",
            "cat": 0
        },
        {
            "name": "户外装备",
            "key": "户外",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/3.jpg",
            "cat": 0
        },
        {
            "name": "健身服饰",
            "key": "健身",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/4.jpg",
            "cat": 0
        },
        {
            "name": "泳衣",
            "key": "泳衣",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/5.jpg",
            "cat": 0
        },
        {
            "name": "瑜伽垫",
            "key": "瑜伽垫",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/6.jpg",
            "cat": 0
        },
        {
            "name": "瑜伽用品",
            "key": "瑜伽",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/7.jpg",
            "cat": 0
        },
        {
            "name": "健身装备",
            "key": "健身",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/8.jpg",
            "cat": 0
        },
        {
            "name": "球迷用品",
            "key": "球迷",
            "icon": "https://cdn.uviewui.com/uview/common/classify/14/9.jpg",
            "cat": 0
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813

]

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/779435