仿美团外卖，左边点击切换右边,右边滑动切换左边，并且右边伴有标题的切换
首先在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
;
var wrapper
= temp
[this.changeIndex
];
wrapper
.scrollIntoView({behavior
: "smooth"})
},
handle(){
var top
= event
.target
.scrollTop
;
var targetView
= this.$refs
.right
;
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
>
