uniapp 14 <scroll-view>横向默认不能滚动，而是换行问题解决

1. 默认效果：换行

2. 希望达成效果: 同行可左右滑动

3. 修正案例源码

<template>
  <!-- 公共布局外层包装 -->
  <view class="pageBg">
    <view class="container">
    <view class="month-list">
      <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
      <view class="scroll-view-item_H" v-for="(item, index) in showTermList" :key="index" @click="chooseTermMonth(index)">
        <view class="title" :class="{fontBold: index == aidTagMonthIndex}">  {{item.termYear}}-{{item.termMonth}} </view>
        <view v-if="index == aidTagMonthIndex" class="bottomLine" :style="{ borderWidth: '1rpx'}"/>
        <view v-else class="bottomLine"/>
      </view>
      </scroll-view>
    </view>
    </view>
  </view> 
</template>

<script setup>
import { ref } from 'vue'
//当前选中月份Tag下标
const aidTagMonthIndex = ref(0)
//月份数据列表
const showTermList = ref([
  {id: 9, termYear: "2026", termMonth: "09"},
  {id: 8, termYear: "2026", termMonth: "08"},
  {id: 7, termYear: "2026", termMonth: "07"},
  {id: 6, termYear: "2026", termMonth: "06"},
  {id: 5, termYear: "2026", termMonth: "05"},
  {id: 4, termYear: "2026", termMonth: "04"},
  {id: 3, termYear: "2026", termMonth: "03"},
  {id: 2, termYear: "2026", termMonth: "02"},
  {id: 1, termYear: "2026", termMonth: "01"}
])
//被选中的月份数据id字段值
const choosedTermId = ref(null)

/**
* 切换二级互援期次
*/
function chooseTermMonth(index) {
  aidTagMonthIndex.value = index
  const term = showTermList.value[index]
  choosedTermId.value = term.id
  console.log("choosedTermId in chooseTermMonth()", choosedTermId.value)
  const termName = term.termYear + "-" + term.termMonth
}
</script>

<style lang="scss" scoped>
/** 
 * 0. 边框调试
 * 1. 背景色
 * 2. 流式布局 + 横向居中
 * 3. 最小高度
 */
.pageBg {
  width: 100%;
  min-height: 100vh;
  background-color: $base-background-color;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: $base-content-width;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

/*包裹月份的块*/
.month-list {
  width: 100%;
  text-align: center;
}

/*将这个放置到全局css里，使对所有的<scroll-view>都生效*/
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item_H {
  display: inline-block;
  padding: 20rpx 0;
  text-align: center;
  .title {
    padding: 0 20rpx;
  }
}

/* 底部横线，无内容，默认不展示，动态修改边框的宽度使其呈现 */
.bottomLine {
  margin: 10rpx auto;
  content: '';
  border: 0rpx solid coral;
  width: 40%;
}
</style>