vue 仿瑞幸咖啡 点餐页面 要求左侧类型 右侧数据,右侧数据滚动 左侧状态发生改变 代码
时间: 2023-11-22 22:56:44 浏览: 48
下面是一个简单的vue仿瑞幸咖啡点餐页面的示例代码,左侧类型和右侧数据使用了v-for指令,右侧数据使用了better-scroll库来实现滚动效果,左侧状态改变时会触发相应的事件。
```
<template>
<div class="container">
<div class="left">
<div class="type-list">
<div v-for="(type, index) in types" :key="index" :class="{ active: activeIndex === index }" @click="handleClickType(index)">
{{ type.name }}
</div>
</div>
</div>
<div class="right">
<div v-for="(type, index) in types" :key="index" class="goods-list" v-show="activeIndex === index">
<div class="title">{{ type.name }}</div>
<div class="goods" ref="goodsWrapper">
<ul>
<li v-for="(goods, i) in type.goods" :key="i" class="item">
<div class="name">{{ goods.name }}</div>
<div class="price">{{ goods.price }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
data() {
return {
activeIndex: 0,
types: [
{
name: '热销',
goods: [
{ name: '拿铁', price: 20 },
{ name: '美式咖啡', price: 18 },
{ name: '摩卡', price: 22 },
],
},
{
name: '果汁',
goods: [
{ name: '苹果汁', price: 15 },
{ name: '橙汁', price: 16 },
{ name: '西瓜汁', price: 18 },
],
},
{
name: '甜品',
goods: [
{ name: '红豆抹茶冰淇淋', price: 25 },
{ name: '草莓蛋糕', price: 28 },
{ name: '瑞幸小蛋糕', price: 10 },
],
},
],
};
},
mounted() {
this.$nextTick(() => {
this.initScroll();
});
},
methods: {
handleClickType(index) {
this.activeIndex = index;
this.scroll.scrollTo(0, 0);
},
initScroll() {
this.scroll = new BScroll(this.$refs.goodsWrapper, {
click: true,
});
},
},
};
</script>
<style scoped>
.container {
display: flex;
height: 100%;
}
.left {
flex: 0 0 25%;
background-color: #f5f5f5;
overflow: hidden;
}
.type-list {
height: 100%;
overflow-y: auto;
}
.type-list .active {
color: #ff8c00;
background-color: #fff;
}
.right {
flex: 1;
overflow: hidden;
}
.right .goods-list {
height: 100%;
overflow-y: auto;
}
.right .title {
height: 40px;
line-height: 40px;
padding-left: 10px;
background-color: #f5f5f5;
}
.right .goods {
padding: 10px;
}
.right .goods ul {
display: flex;
flex-wrap: wrap;
}
.right .goods .item {
width: 50%;
padding: 10px;
box-sizing: border-box;
}
.right .goods .item .name {
font-size: 16px;
margin-bottom: 5px;
}
.right .goods .item .price {
color: #ff8c00;
font-size: 14px;
}
</style>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)