水平スクロールを実装する方法
实现横向滚动需要以下几点:
1、设置width:2000px这种大的宽度
2、父级盒子要overflow:hidden;overflow-x:auto来防止页面宽度溢出,以及实现左右滚动效果
3、隐藏横向滚动条,提供更好的用户体验
示例:
<template>
<div class="university">
<div class="container">
<div class="body">
<ul class="body_content">
<li v-for="(item,index) in universityList" :key="index" class="every_content">
<div class="content_img"><img :src="item.pimage" /></div>
<div class="content_name">{{item.pname}}</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script></script>
<style scoped lang="less">
.university{
.container{
.body{
overflow: hidden; //1、父级盒子:超出部分隐藏
overflow-x: auto; //1、父级盒子:控制横向可滚动,配合overflow:hidden共同控制内容不溢出当前屏幕
&::-webkit-scrollbar { //2、父级盒子:隐藏滚动条
display: none;
}
.body_content{
list-style: none;
width:2000px; //3、子级盒子:设置一个大的宽度,如2000,3000等
.every_content{
margin-right: 25px;
margin-bottom: 10px;
float: left; //4、展示内容的盒子,设置浮动
text-align: center;
}
}
}
}
}
</style>