vue商城项目商品分类页面

可直接复制使用

<template>
  <view class="container">
    <view class="list">
      <!-- 左侧滑动 -->
      <scroll-view scroll-y="true" class="list_left">
        <view v-for="(leftItem, leftIndex) in 50" class="left_item" :key="leftIndex">
          <view class="left_name">一级分类</view>
        </view>
      </scroll-view>
      <!-- 右侧滑动 -->
      <scroll-view scroll-y="true" class="list_right">
        <view class="right_list" v-for="(rightItem, rightIndex) in 4" :key="rightIndex">
          <view class="list_title">分类名称</view>
          <view class="right_content">
            <view class="right_item" v-for="(subItem, subIndex) in 4" :key="subIndex">
              <image class="right_img" src="https://cdn.uviewui.com/uview/album/1.jpg" mode=""></image>
              <view class="right_name">二级分类</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
  
<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const data = ref('')
const dataList = ref([])

onShow(() => {})
</script>

<style lang="scss" scoped >
.container {
  width: 100%;
  height: 100%;
}

.list {
  display: flex;
}

.list_left {
  width: 200rpx;
  height: 100vh; /* 根据需要调整高度 */
}

.left_item {
  border-bottom: 2rpx solid #ffffff;
  font-size: 28rpx;
  font-weight: bold;
  background-color: #f7f7f7;
}

.left_name {
  padding: 30rpx 6rpx;
  text-align: center;
}

.list_right {
  flex: 1;
  height: 100vh; /* 根据需要调整高度 */
}

.list_title {
  font-weight: bold;
  padding: 30rpx 0;
}

.right_content {
  display: flex;
  flex-wrap: wrap;
}

.right_item {
  width: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
}

.right_name {
  padding: 16rpx 0;
}

.right_img {
  width: 150rpx;
  height: 150rpx;
}
</style>