2021/03/28 vue横向滚动栏

最新推荐文章于 2024-06-20 13:10:23 发布

原创

最新推荐文章于 2024-06-20 13:10:23 发布 · 450 阅读

1 ·

CC 4.0 BY-SA版权

想要的效果做成这种可以滚动选择的效果
html代码

<!-- 标题 -->
      <div class="choose-title">选择路线</div>
      <!-- 集货道名称 -->
      <div class="track-group">
        <div
          class="track-item"
          v-for="(item, index) in tracksList"
          :key="index"
          :class="item.isTrackSeleted ? 'choosed' : ''"
          @click="tracksItemClick(item, index)"
        >
          {
  
  { item.name }}
        </div>
      </div>

css代码

.track-group {
      // outline: 1px solid gray;
      display: flex;

      // 设置横向滚动
      white-space: nowrap; //段落中文本不换行
      overflow-x: scroll; //设置横向滚动
      overflow-y: hidden; //禁止纵向滚动
      tex