今日整理,发现这种轮播图是最难实现的一种,
1.再循环中难以控制单一品类商品显示
解决办法: 在外面的主类里面添加&:hover触发标签属性的更改,这样可以单一作用
2.在循环中触发事件,所有的同一事件都会触发
解决办法:先建立模版控制排版,再从单一内容开始微调
<script setup>
import {useCategoryStore} from "@/stores/category.js";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const categoryStore=useCategoryStore();
const {dataList}=storeToRefs(useCategoryStore());</script>
<template><div v-for="item in dataList" :key="item.id" class="alll"><div class="items"><div >{{ item.name }}</div><div v-for="i in item.children? item.children.slice(0,2):[]" :key="i.id">{{ i.name }} </div></div><div class="styples" ><h4>分类推荐 根据您的购买或浏览记录推荐</h4><div class="column"><div class="box" v-for="a in item.goods? item.goods.slice(0,9):[] " :key="a.id"><dl><img :src="a.picture" alt=""><dt>{{ a.name }}</dt><dd>{{ a.desc }}</dd><dd><div>{{ a.price }}</div></dd></dl></div></div></div></div>
</template>
<style scoped lang="scss">
.alll{display: flex;.items{padding: 10px;width: 280px;height: 70px;background: #3f3d3d;position: relative;color: #c2b9b9;display: flex;align-items: center;justify-content:space-between;position: relative;left: 350px;font-size: 20px;&:hover {background: $xtxColor;}// // flex-direction: column;// div{// // width: 100px;// }}
&:hover{.styples{display: flow;}
}// flex-direction: column;
}
.column{display: flex;column-count: 3;flex-wrap: wrap;// width: calc(100% / 3);.box{// display: flex;break-inside: avoid;padding: 10px;width: 240px;border: 1px solid #3f3d3d;}
}.styples{width: 720px;height: 40px;background: rgba(255, 255, 255, 0.8);position: absolute;left: 650px;top: 0px;display: none;h4{height: 40px;justify-content: center;align-items: center;display: flex;}
}
// .open{
// display: flex;
// }
dl{img{height: 100px;}
}
</style>
