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

如果我添加了许多v-ons-list-item元素，OnsenUI2 ons-card（尤其是Vue2.js v-ons-card）的文档自动在内容旁边显示一个滚动条。如何自动添加滚动条到vue onsenui v-ons卡

在这里看到：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，而在铬devtools中，我无法打开并显示演示应用程序。 :-(

添加style="overflow: auto"到一个div包裹卡内部，该卡的内容，或者卡本身并不做任何事情。

来源

2017-10-17 pashute

有该教程中没有额外的CSS。在图像中的滚动条是在页面内容上，而不是在卡片元素上，只需设置一个height和overflow: auto，你就可以得到你的卡片滚动条

来源

2017-10-23 01:25:31

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

回答

相关问题