uni-app项目中左右两级列表联动功能

最新推荐文章于 2024-07-19 23:03:01 发布

World_Mei

最新推荐文章于 2024-07-19 23:03:01 发布

阅读量4.5k

点赞数 3

分类专栏： uni-app Vue

本文链接：https://blog.csdn.net/World_Mei/article/details/105895313

版权

本文介绍了如何在uni-app框架下开发左右两级联动的列表功能，详细讲解了实现步骤，包括数据处理、事件监听和组件交互，帮助开发者创建更复杂的移动端应用交互体验。

摘要由CSDN通过智能技术生成

效果图

<template>
	<view class="proClass flex-row" :style="proClassStyle">
		<!-- 加载动画 -->
		<loading :isShow="isloadingShow"></loading>
		
		<!-- 左侧一级分类列表 -->
		<scroll-view scroll-y class="primaryScroll flex-1 height-100" 
		:scroll-top="primaryScrollTop">
			<block v-for="(item,index) in primaryItemData">
				<view class="primaryItem padding-y-10" 
				@tap="primaryItemActive(index)"
				>
					<view class="padding-y-10 text-center primaryContent" 
					:class="activeIndex===index?'activePrimaryContent':''">
						{
   {
   item.primary_name}}
					</view>
				</view>	
			</block>			
		</scroll-view>
		
		<!-- 右侧二级分类列表 -->
		<scroll-view scroll-y class="flex-3 height-100" 
		:scroll-top="secondaryScrollTop" 
		scroll-with-animation 
		@scroll="secondaryScroll"
		>
			<block v-for="(item,index) in secondaryItemData">
				<view class="secondaryItemContainer" 
				:style="{minHeight:minHeightValue}"
				>
					<view class="scondaryItem row">
						<view class=&#