uniapp scroll-view实现横向滚动

1、实现效果

2、代码实现

template部分

        <scroll-view class="scroll-view" scroll-x="true">
            <view class="item" v-for="(item,index) in list" :key="index">
                这个位置是item 内容位置
            </view>
        </scroll-view>

script部分

<script>
    export default {
        data() {
            return {
                list: [1, 2, 3, 4, 5]
            }
        }
    }
</script>

style部分

<style lang="scss">
    .scroll-view {
        white-space: nowrap;
        width: 100%;

        .item {
            width: 50%;
            height: 200rpx;
            background-color: yellowgreen;
            display: inline-flex;
            margin-right: 20rpx;
            align-items: center;
            justify-content: center;
        }
    }
</style>

3、核心实现

1、scroll-view必须设置为：white-space: nowrap;
2、item布局最外层，必须为行内布局，例如：inline-block 或 inline-flex