vue移动端项目经验

如何实现横向滚动

实现横向滚动需要以下几点：
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>