uni-app开发中垂直分类布局(mallMenu-商城分类)

本篇文章是基于vue3进行开发，开发工具使用的是vscode,使用的组件库是uView-plus

关于代码的解释都在注释里面，大家可以参考

<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 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 :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 setup>
import { ref, onMounted, nextTick } from 'vue'
import { onReady, onLoad } from '@dcloudio/uni-app'
import classifyData from '@/utils/classify.data.js'

const scrollTop = ref(0) // 用于控制左侧菜单滚动位置的响应式变量。
const oldScrollTop = ref(0) //  用于存储右侧内容区上次的滚动位置。
const current = ref(0) // 表示当前激活的菜单项的索引。
const menuHeight = ref(0) //左侧菜单的总高度。
const menuItemHeight = ref(0) //单个菜单项的高度。
const itemId = ref('') //用于右侧内容滚动定位的元素 ID。
const tabbar = ref(classifyData) // 存储菜单数据的数组，从 classifyData 导入。
const menuItemPos = ref([]) //存储菜单项位置信息的数组。
const arr = ref([]) //存储每个右侧内容项顶部距离的数组。
const scrollRightTop = ref(0) //控制右侧内容区滚动位置的响应式变量。
const timer = ref(null) //用于函数节流的定时器变量。

onMounted(() => {
  getMenuItemTop()
})

/*
当用户点击左侧菜单项时调用。它首先确保所有右侧内容项的顶部距离已被计算和存储。然后，如果选中的菜单项与当前激活的菜单项不同，
它会更新 scrollRightTop 来滚动右侧内容区，使选中的内容项可见，并调用 leftMenuStatus 来更新左侧菜单的状态。
*/

const swichMenu = async (index) => {
  console.log(index)
  if (arr.value.length === 0) {
    await getMenuItemTop()
  }
  if (index === current.value) return
  scrollRightTop.value = oldScrollTop.value
  nextTick(() => {
    scrollRightTop.value = arr.value[index]
    current.value = index
    leftMenuStatus(index)
  })
}
/*
此函数用于获取指定元素的高度。它创建一个选择器查询（createSelectorQuery），
获取特定类的元素高度，并将这个值保存在指定的响应式变量中。这对于计算滚动位置非常重要。
*/
const getElRect = async (elClass, dataVal) => {
  return new Promise((resolve) => {
    const query = uni.createSelectorQuery()
    query
      .select('.' + elClass)
      .boundingClientRect((rect) => {
        if (!rect) {
          setTimeout(() => {
            getElRect(elClass, dataVal)
          }, 10)
          return
        }
        dataVal = rect.height
        resolve()
      })
      .exec()
  })
}

//根据当前选中的菜单项索引来更新左侧菜单的状态。此方法计算 scrollTop 以确保选中的菜单项在左侧菜单中垂直居中。
// menuHeight:左侧菜单总高度   menuItemHeight:单个菜单的高度
const leftMenuStatus = async (index) => {
  current.value = index
  if (menuHeight.value === 0 || menuItemHeight.value === 0) {
    await getElRect('menu-scroll-view', 'menuHeight')
    await getElRect('u-tab-item', 'menuItemHeight')
  }
  // scrollTop:控制左侧菜单滚动位置
  scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2
}
// 获取并存储右侧每个内容项的顶部位置。这对于后续根据滚动位置判断当前激活的菜单项非常关键。
const getMenuItemTop = () => {
  return new Promise((resolve) => {
    let selectorQuery = uni.createSelectorQuery()
    selectorQuery
      .selectAll('.class-item')
      .boundingClientRect((rects) => {
        if (!rects.length) {
          setTimeout(() => {
            getMenuItemTop()
          }, 10)
          return
        }
        rects.forEach((rect) => {
          arr.value.push(rect.top - rects[0].top)
          resolve()
        })
      })
      .exec()
  })
}
/*
当用户滚动右侧内容区时触发。它首先确保所有必要的尺寸信息都已经获取。然后使用一个简单的节流机制
（通过 timer）来限制事件处理的频率。该方法根据当前滚动位置更新左侧菜单的选中状态。
*/
const rightScroll = async (e) => {
  oldScrollTop.value = e.detail.scrollTop
  if (arr.value.length === 0) {
    await getMenuItemTop()
  }
  if (timer.value) return
  if (!menuHeight.value) {
    await getElRect('menu-scroll-view', 'menuHeight')
  }
  setTimeout(() => {
    timer.value = null
    let scrollHeight = e.detail.scrollTop + menuHeight.value / 2
    for (let i = 0; i < arr.value.length; i++) {
      let height1 = arr.value[i]
      let height2 = arr.value[i + 1]
      if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
        leftMenuStatus(i)
        return
      }
    }
  }, 10)
}
</script>

<style lang="scss" 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-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>

下面是数据

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,
			},
		],
	},
];