OnsenUI2 ons-card
(尤其是 Vue2.js v-ons-card
)的文档如果我添加,会自动在内容旁边显示一个滚动条许多 v-ons-list-item
元素。
参见此处: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、卡片内容或卡片本身不会执行任何操作。
最佳答案
该教程中没有额外的 CSS。图片中的滚动条位于页面内容上,而不是卡片元素上。只需设置 height
和 overflow: auto
即可获得卡片滚动条。
关于css - vue onsenui v-ons-card 自动添加滚动条的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46785394/