Creating Vue Applications Using the Quasar Framework with Virtual Scrolling
Written on
Quasar is a widely used Vue UI framework ideal for building attractive Vue applications. In this article, we will explore how to develop Vue applications utilizing the Quasar UI library.
Horizontal Virtual Scrolling
To implement horizontal virtual scrolling, simply add the virtual-scroll-horizontal property to your scrolling container:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-virtual-scroll
style="max-height: 300px;" :items="heavyList"
separator
virtual-scroll-horizontal
>
<template v-slot="{ item, index }">
<q-item :key="index" dense>
<q-item-section>
<q-item-label>
#{{ index }} - {{ item.label }}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-virtual-scroll>
</div>
<script>
const maxSize = 10000;
const heavyList = [];
for (let i = 0; i < maxSize; i++) {
heavyList.push({
label: option ${i}});
}
new Vue({
el: "#q-app",
data: {
heavyList}
});
</script>
</body>
</html>
Customizing Item Templates
You can customize the item template to present items in your preferred style:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-virtual-scroll
style="max-height: 300px;" :items="heavyList"
separator
>
<template v-slot="{ item, index }">
<q-banner v-if="item.banner === true" class="bg-black text-white q-py-xl" :key="index">
#{{ index }} - {{ item.label }}</q-banner>
<q-item v-else :key="index" dense clickable>
<q-item-section>
<q-item-label>
#{{ index }} - {{ item.label }}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-virtual-scroll>
</div>
<script>
const maxSize = 10000;
const heavyList = [];
for (let i = 0; i < maxSize; i++) {
heavyList.push({
label: option ${i},
banner: i === 0
});
}
new Vue({
el: "#q-app",
data: {
heavyList}
});
</script>
</body>
</html>
We place the item template within the default slot.
Table Style Virtual Scrolling Container
Additionally, you can showcase items in a virtual scrolling container styled like a table:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-virtual-scroll
type="table"
style="max-height: 70vh;" :virtual-scroll-item-size="48" :virtual-scroll-sticky-size-start="48" :virtual-scroll-sticky-size-end="32" :items="heavyList"
>
<template v-slot="{ item: row, index }">
<tr :key="index">
<td>#{{ index }}</td>
<td v-for="col in columns" :key="index + '-' + col">{{ row[col] }}</td>
</tr>
</template>
</q-virtual-scroll>
</div>
<script>
const data = [
{ name: "Frozen Yogurt", calories: 159, fat: 6.0, carbs: 24 },
{ name: "Ice cream sandwich", calories: 237, fat: 9.0, carbs: 37 },
{ name: "Eclair", calories: 262, fat: 16.0, carbs: 23 },
{ name: "Cupcake", calories: 305, fat: 3.7, carbs: 67 },
{ name: "Gingerbread", calories: 356, fat: 16.0, carbs: 49 },
{ name: "Jelly bean", calories: 375, fat: 0.0, carbs: 94 },
{ name: "Lollipop", calories: 392, fat: 0.2, carbs: 98 },
{ name: "Honeycomb", calories: 408, fat: 3.2, carbs: 87 },
{ name: "Donut", calories: 452, fat: 25.0, carbs: 51 },
{ name: "KitKat", calories: 518, fat: 26.0, carbs: 65 }
];
const columns = ["name", "calories", "fat", "carbs"];
const heavyList = [];
for (let i = 0; i <= 1000; i++) {
heavyList.push(...data);}
Object.freeze(heavyList);
Object.freeze(columns);
new Vue({
el: "#q-app",
data: {
columns,
heavyList
}
});
</script>
</body>
</html>
We render the columns within the default slot. The virtual-scroll-item-size property is used to adjust the item height or width based on whether the list is vertical or horizontal. The virtual-scroll-sticky-size-start property sets the dimensions of the sticky section, while the virtual-scroll-sticky-size-end property manages the bottom sticky area.
Conclusion
With the help of Quasar's q-virtual-scroll component, you can create a virtual scrolling container with diverse styles.