时间戳

首页 > 解决方案 > 动态列表的水平滚动

javascript - 动态列表的水平滚动

问题描述

我需要在一个冗长的列表中水平滚动。当列表如下静态实现时，这是可能的。

 <div style="margin-top:100px;white-space: nowrap;">
  <ul >
    <li style="display:inline">wfwe1</li>
    <li style="display:inline">wfwe2</li>
    <li style="display:inline">wfwe3</li>
    <li style="display:inline">wfwe4</li>
    <li style="display:inline">wfwe5</li>
    <li style="display:inline">wfwe6</li>
    <li style="display:inline">wfwe7</li>
     <li style="display:inline">wfwe1</li>
    <li style="display:inline">wfwe2</li>
    <li style="display:inline">wfwe3</li>
    <li style="display:inline">wfwe4</li>
    <li style="display:inline">wfwe5</li>
    <li style="display:inline">wfwe6</li>
    <li style="display:inline">wfwe7</li>
  </ul>
 </div>

但是如果我们通过循环获取列表，它甚至不会显示内联。所以水平滚动是不可能的。我的尝试如下。

 <div
  style="margin-top:100px;white-space: nowrap;">
  <ul
    v-for="(infoChildBtn, index) in infoSubContracts"
    :key="index"
    @click="infoTopBtnFun1(index, infoChildBtn)">
    <li style="display:inline">
      {{ infoChildBtn }}
    </li>
  </ul>
</div>

我在哪里弄错了，如何解决这个问题？

标签： javascriptvue.js

解决方案

您的静态示例和 Vue 示例之间的区别在于，您v-for在ul元素上使用。因此你最终会得到这样的东西：

  <ul>
    <li style="display:inline">wfwe1</li>
  </ul>
  <ul>
    <li style="display:inline">wfwe2</li>
  </ul>
  <ul>
    <li style="display:inline">wfwe3</li>
  </ul>
  <ul>
    <li style="display:inline">wfwe4</li>
  </ul>

尝试将您的 Vue 模板更改为

<div style="margin-top:100px;white-space: nowrap;">
  <ul>
    <li
      style="display:inline"
      v-for="(infoChildBtn, index) in infoSubContracts"
      :key="index"
      @click="infoTopBtnFun1(index, infoChildBtn)">
      {{ infoChildBtn }}
    </li>
  </ul>
</div>

所以你实际上是循环li标签，而不是ul标签。

推荐阅读