uni-app之商城分类导航

最新推荐文章于 2023-12-06 18:33:19 发布

原创

最新推荐文章于 2023-12-06 18:33:19 发布 · 4.8k 阅读

45 ·

CC 4.0 BY-SA版权

uni-app之商城分类导航系统

效果：
在这里插入图片描述

<template>
	<view class="productClass row" :style="productClassStyle">
		<loading :isShow="isLoadingShow"></loading>
		<!-- 左侧一级分类列表 -->
		<scroll-view class="leftClassList col-3 h-100" scroll-y :scroll-top="primaryScrollTop">
			<view class="leftClassItem" v-for="(item,index) in leftClassData" :key="index">
				<view :class="currentIndex===index?'selectClassItem':''" @tap="selectClassTap(index)">{
   
   {
   
   item.primary_name}}</view>
			</view>
		</scroll-view>
		
		<!-- 右侧二级分类列表 -->
		<scroll-view class="rightClassList col-9 h-100" scroll-with-animation scroll-y :scroll-top="scrollTop" @scroll="rightScroll">
			<view v-for="(item,index) in rightClassData" :key="index" class="rightClassBox" :style="{'min-height':rightUsableHeight}">
				<view class="row">
					<view class="col-12-percent text-center font-bold">{
   
   {
   
   item.primaryName}}</view>
						<view v-for="(item1,index1) in item.list" :key="index1" class="rightClassItem h-auto col-4-percent dis-flex align-center">
						<image :src="item1.cover"></image>
						<view>