scrollView

<template>
    <scroll-view scroll-y class="scrollView scrollViewY">
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
        <view>相当于一个y轴滚动条的盒子</view>
    </scroll-view>
    <scroll-view scroll-x class="scrollView scrollViewX">
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
        <view class="xItem">相当于一个横轴滚条的的盒子，但是样式需设置white-space=nowarp，felx布局不生效</view>
    </scroll-view>
</template>

<script setup>

</script>

<style lang="scss">
    .scrollView {
        width: 90%;
        height: 100px;
        border: 1px solid black;
    }
    .scrollViewX {
        // 不生效，因为uniapp使用scrollView多层嵌套标签，浏览器中看到下一层元素是自动生成的uni-scroll-view而不是xItem
        // display: flex;
        // flex-wrap: nowrap;
        
        white-space: nowrap; // 才会生效
        .xItem {
            width: 100px;
            display: inline-block;
        }
    }
</style>

在scrollView组件中生成的元素有uniapp自动生成的页面结构，不可以使用简单的使用felx布局