反向 q 滚动区域
Reverse q-scroll-area
我想反转q-scroll-area。我的意思是我希望它表现得像聊天。我希望组件从下往上渲染,而不是从上往下渲染。我还希望挂载默认滚动条位于底部而不是顶部。
有没有简单的方法可以做到这一点,还是我必须全部手动完成?谢谢。
quasar框架q-scroll-area一般不用于聊天之类的模块,它们有Infinite Scroll which is a perfect solution issue you are facing. it also support Reverse Scroll,你可以通过reverse
prop
使用它
<template>
<div class="q-pa-md">
<q-infinite-scroll @load="onLoad" reverse>
<template slot="loading">
<div class="row justify-center q-my-md">
<q-spinner color="primary" name="dots" size="40px" />
</div>
</template>
<div v-for="(item, index) in items" :key="index" class="caption q-py-sm">
<q-badge class="shadow-1">
{{ items.length - index }}
</q-badge>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
</div>
</q-infinite-scroll>
</div>
</template>
我想反转q-scroll-area。我的意思是我希望它表现得像聊天。我希望组件从下往上渲染,而不是从上往下渲染。我还希望挂载默认滚动条位于底部而不是顶部。
有没有简单的方法可以做到这一点,还是我必须全部手动完成?谢谢。
quasar框架q-scroll-area一般不用于聊天之类的模块,它们有Infinite Scroll which is a perfect solution issue you are facing. it also support Reverse Scroll,你可以通过reverse
prop
<template>
<div class="q-pa-md">
<q-infinite-scroll @load="onLoad" reverse>
<template slot="loading">
<div class="row justify-center q-my-md">
<q-spinner color="primary" name="dots" size="40px" />
</div>
</template>
<div v-for="(item, index) in items" :key="index" class="caption q-py-sm">
<q-badge class="shadow-1">
{{ items.length - index }}
</q-badge>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
</div>
</q-infinite-scroll>
</div>
</template>