uni-app scroll-view左右滚动


要点: 

使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height。

使用横向滚动时,需要给 <scroll-view> 一个固定宽度,通过 css 设置 width。

<template>
    <view class="tab">
        <scroll-view class="tab-scroll-view" :scroll-x="true">
            <view class="tab-item" v-for="(item, index) in tabList" :key="index">
                 {{item.name}}
            </view>
        </scroll-view>
    </view>
</template>
<style lang="less">
    .tab-scroll-view {
        width: 750rpx;
        height: 84rpx;
        flex-direction: row;
        white-space: nowrap;
        .tab-item {
            display: inline-block;
            width: 150rpx;
            height: 284rpx;
            font-size: 16px;
            color: #555;
            border: 1px solid yellow;
        }
    }
</style>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM