滚动区域

在封装您的内容的QScrollArea组件的帮助下Quasar提供了一种自定义滚动条的好方式。 把它想象成一个DOM元素，它具有overflow：auto，但是用你自定义样式而不是浏览器默认的滚动条以及顶部几个很好的功能。

这对桌面应用特别有用，因为在移动设备上滚动条是隐藏的。 在移动设备上时，QScrollArea只是简单地将内容封装在为默认浏览器滚动所配置的<div>中。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QScrollArea']
}

基本用法

QScrollArea支持用户通过拖动自定义滚动条或使用鼠标滚轮进行滚动。 在具有触摸屏的桌面上，触摸操作也可以进行触发滚动。

<!--
  在这个例子中，我们设置了一个高度来强制
  自定义滚动条出现
-->
<q-scroll-area style="width: 400px; height: 100px;">
  <div v-for="n in 10">
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua.
  </div>
</q-scroll-area>

Vue属性

属性 说明
thumb-style 带CSS属性和值的对象，用于定制自定义滚动条的缩略图。
content-style 带CSS属性和值的对象，用于定制QScrollArea容器。
content-active-style 带CSS属性和值的对象，用于定制QScrollArea容器，当滚动区域变为活动状态（鼠标悬停）时。
delay 在鼠标悬停在容器后自定义滚动条变为可见之前定义延迟的数字（以毫秒为单位，默认值为1000）。

自定义滚动条示例

<!--
  自定义滚动条缩略图，
  将鼠标悬停在可滚动内容后
  延迟1.5秒钟显示
-->
<q-scroll-area
  style="height: 200px"
  :thumb-style="{
    right: '4px',
    borderRadius: '5px',
    background: 'red',
    width: '10px',
    opacity: 1
  }"
  :delay="1500"
>
  ...Scrollable.Content...
</q-scroll-area>

Vue方法

方法 说明
setScrollPosition(offset[,duration]) 将滚动位置设置为一个偏移量。 如果指定了一个持续时间（以毫秒为单位），则滚动会有动画效果。
无限滚动 滚动触发