vue之美团分类切换

仿美团外卖，左边点击切换右边,右边滑动切换左边，并且右边伴有标题的切换

首先在src的components创建两个组件

Main.vue中

<template>
	<div>
		<!-- 类似美团切换的案例 -->
		<!-- 分类 -->
		<div class="classify-content">
			<div class="left-content">
				<div class="left-item-content">
					<Left :index="index" :changeIndex="changeIndex" @leftIndex="leftIndex"
					  v-for="(item,index) in moodsList" :item="item"
					>
						
					</Left>
				</div>
			</div>
			<div class="right_container" ref="rights" @touchstart="onTouchstart">
				<div class="right_wrrapper">
					<div class="right_item_block_container" v-for="(item,index) in moodsList" :key="index" ref="right">
						<p class="title">{{item.cname}}</p>
						<div class="right_iteem_block_wrapper">
							<Right v-for="(item,index) in item.subcategories" :key="index" :item="item">
								
							</Right>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		
		
	</div>
</template>

<script>
	import axios from 'axios'
	import Left from '../components/Left.vue'
	import Right from '../components/Right.vue'
	export default{
		data(){
			return{
				changeIndex:0,
				moodsList:[],
			}
		},
		components:{
			Left,Right
		},
		mounted(){
			axios.get("http://api.kudesoft.cn/tdk/category")
			.then(res=>{
				this.moodsList = res.data.data.data;
			})
			this.$refs.rights.addEventListener("scroll",this.handle)//添加事件
		},
		methods:{
			leftIndex(index){
				this.changeIndex = index;
				this.$refs.rights.removeEventListener("scroll",this.handle)//移出事件
				var temp = this.$refs.right;
				// console.log(temp)
				var wrapper = temp[this.changeIndex];
				wrapper.scrollIntoView({behavior: "smooth"})
			},
			handle(){
				var top = event.target.scrollTop;
				var targetView = this.$refs.right;
				// console.log(targetView)
				for(let index=0;index<targetView.length;index++){
					if(top>=targetView[index].offsetTop&&top<targetView[index+1].offsetTop){
						this.changeIndex = index;
					}
				}
			},
			onTouchstart(){//触摸事件
				this.$refs.rights.addEventListener("scroll",this.handle)//添加事件
			}
		}
	}
</script>

<style scoped="scoped">
.classify-content{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
}	
.left-content{
	width: 24%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}

.right_container
{
  height: 100%;
  width: 73%;
  overflow: scroll;
}

.right_wrrapper
{
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.right_item_block_container
{
  width: 100%;
}

.right_iteem_block_wrapper
{
  width: 100%;
  float: left;
}

.title
{
  width: 100%;
  height: 20px;
  background-color: red;
  text-align: center;
  margin: 0px;
}
</style>

Left.vue

<template>
	<div>
		<!-- 左边数据 -->
		<div :class="['left_item_container',{'lefy_item_active':changeIndex===index}]" @click="onClick">
		    {{item.cname}}
		</div>
		
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
		    item:{
		      type:Object,
		      required:true
		    },
		    changeIndex:{
		      type:Number
		    },
		    index:{
		      type:Number
		    }
		  },
		methods:{
		    onClick(){
		      this.$emit("leftIndex",this.index)
		    }
		}
	}
</script>

<style scoped="scoped">
.left_item_container
{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lefy_item_active
{
  border-left: 2px solid red;
}	
</style>

Right.vue

<template>
	<div>
		<!-- 右边数据 -->
		<div class="right-item-list">
			<div>
				<img :src="item.scpic">
			</div>
			<div>{{item.subcname}}</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped="scoped">
	.right-item-list{
		width: 30%;
		height: 160px;
		float: left;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		margin-left: 5px;
		margin-top: 5px;
	}
	.right-item-list >>> img{
		width: 100%;
		height: 120px;
	}
</style>