在开发过程中,如果数据过多,显示所有数据挤在一起,那样不美观,所以一般使用overflow:auto控制其滑动显示
下面是一个数据的展示:
<div class="scroll-container">
<div class="test-box">
<div class="box-heard">
<div class="heard-item" v-for="(item,index) in 30" :key="index">
<div>商品数据{{ index }}</div>
</div>
</div>
</div>
</div>
<style lang="scss" scoped>
.scroll-container {
padding: 30px;
box-sizing: border-box;
}
.test-box {
.box-heard {
display: flex;
background-color: #d7dce0;
.heard-item {
width: 200px;
}
}
}
</style>
在浏览器上是如上图展示
思考:如何让每个数据宽度固定位200px,如果超出屏幕滑动展示
解决:可以给外部大盒子scroll-container设置overflow:auto
代码演示:
.scroll-container {
padding: 30px;
box-sizing: border-box;
overflow-x: auto;
}
.test-box {
.box-heard {
display: flex;
background-color: #d7dce0;
.heard-item {
width: 200px;
}
}
}
问题:发现依然不能滑动,思考原因
发现:heard-item虽然设置每个数据宽度是200px,可是并没有浏览器中数据的宽度依然是被挤压,并没有显示200px,那我们给其一个固定的宽度
.heard-item {
// width: 200px;
flex: 0 0 200px;
}
问题:现在是可以滑动了,但是背景颜色并没有正常显示
思考:是什么原因导致的
1.发现 box-heard的宽度是固定的
2.如何让box-heard的宽度根据数据的数量来变化
<div class="scroll-container">
<div class="test-box">
<div class="box-heard" :style="{width:30*200+'px'}">
<div class="heard-item" v-for="(item,index) in 30" :key="index">
<div>商品数据{{ index }}</div>
</div>
</div>
</div>
</div>
到此为止问题解决:
全部代码演示:
<template>
<div>
<div class="scroll-container">
<div class="test-box">
<div class="box-heard" :style="{width:30*200+'px'}">
<div class="heard-item" v-for="(item,index) in 30" :key="index">
<div>商品数据{{ index }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
.scroll-container {
padding: 30px;
box-sizing: border-box;
overflow-x: auto;
}
.test-box {
.box-heard {
display: flex;
background-color: #d7dce0;
.heard-item {
// width: 200px;
flex: 0 0 200px;
}
}
}
</style>