解決:

scroll-view 加white-space: nowrap;

scroll-view 子元素加display: inline-block;

⚠️:不用加 display: flex; 屬性

如下程式碼:

　　　　　　<view class="instruments-head">
            
            <scroll-view class="instruments-scroll" scroll-x="true">
                <view class="instruments-scroll-item" :class
 
="item.isActive ? 'active' : ''" v-for="(item,index) in instrumentsList" :key="index" @click="handleInstruments(index,item.id)">
                    <image :src="item.img"></image>
                    <view class="head-item">{{ item.text }}</view>
                </view>
 

            </scroll-view>
            
        </view>

        .instruments-head{
            background-color: #f6f6f6;
            width: 100%;
            height: 200rpx;
            border-bottom: 1px solid #e5e5e5;
            padding: 20rpx 2rpx 20rpx 20rpx;
            margin-bottom: 20rpx
 
;
            .instruments-scroll{
                white-space: nowrap;
                .instruments-scroll-item{
                    display: inline-block;
                    margin-right: 20rpx;
                    width: 160rpx;
                    height: 160rpx;
                    position: relative;
                    border-radius: 15rpx;
                    background-color: #ce4131;
                    box-sizing: border-box;
                    image{
                        width: 100%;
                        height: 100%;
                        border-radius: 15rpx;
                    }
                    .head-item{
                        position: absolute;
                        top: 10rpx;
                        left: 10rpx;
                        color: #fff;
                        font-size: 22rpx;
                        font-weight: bold;
                    }
                }
            }
        }