vue onsenui如何自动添加滚动条v-ons-card

Question

如果我添加许多 v-ons-list-item 元素，OnsenUI2 ons-card（特别是 Vue2.js v-ons-card）的文档会自动在内容旁边显示一个滚动条。

看这里：https://onsen.io/v2/api/vue/v-ons-card.html

这是我使用额外列表项修改教程并添加滚动条时发生的情况的屏幕截图：

但是当我在我的代码中手动执行时，我没有滚动条。

   <v-ons-card>
  <div class="title">
    My title here
  </div>
  <div class="content">
    <v-ons-list>
      <!-- <v-ons-list-header>row 1</v-ons-list-header> -->
      <v-ons-list-item>Row 1</v-ons-list-item>
      <v-ons-list-item>Row 2</v-ons-list-item>
      <v-ons-list-item>Row 3</v-ons-list-item>
      <v-ons-list-item>Row 4</v-ons-list-item>
      <v-ons-list-item>Row 5</v-ons-list-item>
      <v-ons-list-item>Row 6</v-ons-list-item>
      <v-ons-list-item>Row 7</v-ons-list-item>
      <v-ons-list-item>Row 8</v-ons-list-item>
      <v-ons-list-item>Row 9</v-ons-list-item>
      <v-ons-list-item>Row 10</v-ons-list-item>
      <v-ons-list-item>Row 11</v-ons-list-item>
      <v-ons-list-item>Row 12</v-ons-list-item>
      <v-ons-list-item>Row 13</v-ons-list-item>
      <v-ons-list-item>Row 14</v-ons-list-item>
      <v-ons-list-item>Row 15</v-ons-list-item>
      <v-ons-list-item>Row 16</v-ons-list-item>
    </v-ons-list>
  </div>
</v-ons-card>

它是如何实现的？

该示例未显示完整 css，并且在 chrome devtools 中我无法打开和显示演示应用程序。 :-(

将 style="overflow: auto" 添加到 div 包装卡片内部、卡片内容或卡片本身不会执行任何操作。

Answer 1

该教程中没有额外的内容 CSS。图片中的滚动条位于页面内容上，而不是卡片元素上。只需设置 height 和 overflow: auto 即可获得卡片滚动条。

vue onsenui如何自动添加滚动条v-ons-card

How to automatically add scrollbar to vue onsenui v-ons-card

css

scrollbar

onsen-ui2

vuejs2