Skip to content

Instantly share code, notes, and snippets.

@johandanforth

johandanforth/index.cshtml

Created April 1, 2023 15:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johandanforth/27369a79767cede99f5d3fc35e704753 to your computer and use it in GitHub Desktop.
Save johandanforth/27369a79767cede99f5d3fc35e704753 to your computer and use it in GitHub Desktop.
Download ZIP
Sample browser-only use of vue.js version 3 page with vue-virtual-scroller
Raw
index.cshtml
@page
@model PrivacyModel
@{
Layout = null;
}
<html>
<head>
<title>vue virtual scroller sample</title>
<link href="https://unpkg.com/vue-virtual-scroller@2.0.0-beta.8/dist/vue-virtual-scroller.css" rel="stylesheet" />
<style scoped>
.scroll-container {
height: 300px;
}
.scroller {
height: 100%;
}
.user {
height: 32%;
padding: 0 12px;
}
</style>
</head>
<body>
<h2>Virtual Scroller</h2>
<div id="app">
<div class="scroll-container">
<recycle-scroller class="scroller"
:items="list"
:item-size="32"
key-field="id"
v-slot="{ item }">
<div class="user">
{{ item.name }}
</div>
</recycle-scroller>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-virtual-scroller@2.0.0-beta.8/dist/vue-virtual-scroller.min.js"></script>
<script>
const { createApp } = Vue;
var app = createApp({
data() {
return {
list: []
}
},
mounted() {
console.log("mounted");
for (let i = 0; i < 10000; i++) {
this.list.push({
id: i,
name: "item " + i
});
}
}
});
app.component('RecycleScroller', VueVirtualScroller.RecycleScroller);
app.mount('#app');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment