uni-app中的scrollview的横向滚动设置无效

1.使用竖向滚动时，需要给一个固定高度，通过 css 设置 height；<scroll-viewscroll-y="true" scroll-with-animation :show-scrollbar="true" style="height:800rpx"></scroll-view>2.使用横向滚动式，需要给添加white-space: nowrap;样式样式里用f

尼克_张

1833人浏览 · 2021-07-20 14:28:08

尼克_张 · 2021-07-20 14:28:08 发布

1.使用竖向滚动时，需要给一个固定高度，通过 css 设置 height；

<scroll-view  scroll-y="true" scroll-with-animation :show-scrollbar="true" style="height:800rpx">
</scroll-view>

2.使用横向滚动式，需要给scroll-view添加white-space: nowrap;样式
样式里用flex没啥用要用display:inline-block

<scroll-view scroll-x="true" style="white-space:nowrap;" :show-scrollbar="true" >
      <view
        v-for="(item, index) in metroList"
        :key="index"
        :style="activeId == item.metroId ? 'border:2rpx solid red' : ''"
        :class="['itemMetro']"
        @click="handleClick(item)"
      >
      </view>
</scroll-view>

.itemMetro {
      display: inline-block;
      text-align: center;
      width: 160rpx;
      height: 186rpx;
      border: 2rpx dashed #ccc;
      margin-right: 21rpx;
      &:last-child {
        margin-right: 0;
      }
}