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

时间:2017-10-17 08:07:35

标签: css vuejs2 scrollbar onsen-ui2

如果我添加了许多ons-card元素,OnsenUI2 v-ons-card(尤其是Vue2.js v-ons-list-item)的文档会自动显示内容旁边的滚动条。

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

以下是我使用额外列表项修改教程时所发生的情况的屏幕截图,并添加了滚动条:

spilling over card content with scrollbar

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

   <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中不会执行任何操作。

1 个答案:

答案 0 :(得分:0)

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