美国纽约网站建设费用/网站热度查询

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

首先在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>