时间戳

首页 > 解决方案 > 反向 q-滚动区域

javascript - 反向 q-滚动区域

问题描述

我想反转 q-scroll-area。我的意思是我希望它表现得像一个聊天。我希望组件从底部向上渲染，而不是从顶部渲染。我还希望安装上的默认滚动位于底部而不是顶部。

有没有一种简单的方法可以做到这一点，还是我必须手动完成？谢谢。

标签： javascriptvue.jsquasar-frameworkquasar

解决方案

quasar 框架 q-scroll-area 通常不用于类似聊天的模块，它们具有无限滚动，这是您面临的完美解决方案。它还支持Reverse Scroll，你可以通过传递一个reverseprop来使用它

<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>

推荐阅读