У меня есть одностраничное приложение, использующее vue. js (и боковые инструменты; vuex, vue -router et c.). приложение отстает, когда на временной шкале много постов.
Предварительный просмотр
Как я могу удалить невидимые сообщения (желтые сообщения на изображении предварительного просмотра) на экране пользователя, как Instagram?
Instagram и Twitter решены Эта проблема путем удаления сообщений из DOM и сохранения позиции прокрутки: Instagram показывает 8 сообщений при прокрутке
я создал временную шкалу на codepen для помощи:
Vue.component('post', {
template: '#template-post',
props: ['post'],
});
new Vue({
el: '#app',
data: () => ({
posts: [],
}),
methods: {
pushPost() {
for(let i = 1; i <= 10; i++) {
this.posts.push({
textLength: Math.floor(Math.random() * 6),
});
}
},
},
mounted() {
this.pushPost();
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css" rel="stylesheet"/>
<body class="bg-gray-100">
<span id="app">
<nav class="w-full h-12 flex items-center justify-between bg-purple-700 px-8">
<span class="block w-24 h-8 bg-purple-600 rounded-sm"></span>
<span class="flex items-center">
<span class="block w-12 h-4 bg-purple-600 rounded-full"></span>
<span class="block w-12 h-4 bg-purple-600 rounded-full mx-4"></span>
<span class="block w-12 h-4 bg-purple-600 rounded-full"></span>
</span>
</nav>
<span class="grid grid-cols-12 gap-8 max-w-3xl mx-auto p-8">
<aside class="col-span-5">
<span class="block w-7/12 h-4 bg-gray-300 rounded-full"></span>
<span class="block w-10/12 h-4 bg-gray-300 rounded-full mt-3"></span>
<span class="block w-8/12 h-4 bg-gray-300 rounded-full mt-3"></span>
<span class="block w-11/12 h-4 bg-gray-300 rounded-full mt-3"></span>
</aside>
<main class="col-span-7">
<post :post="post" :class="{ 'mt-8': key }" :key="key" v-for="(post, key) in posts"></post>
<button
class="w-64 block bg-yellow-400 text-yellow-700 rounded font-semibold text-sm py-2 px-4 mt-4 mx-auto"
@click="pushPost">LOAD MORE</button>
</main>
</span>
</span>
<script type="text/x-template" id="template-post">
<span class="block w-full bg-white shadow-xs rounded-lg">
<header class="flex items-center justify-between sm:rounded-t py-3 px-3">
<span class="flex items-center py-1">
<span class="block w-8 h-8 bg-gray-300 rounded-full" />
<span class="flex items-start justify-start flex-col ml-3">
<span class="block w-32 h-3 bg-gray-300 rounded-full" />
<span class="block w-20 h-2 bg-gray-300 rounded-full mt-1" />
</span>
</span>
<span class="py-2 px-3">
<span class="block w-4 h-4 bg-gray-300 rounded-full" />
</span>
</header>
<main class="border-t border-b p-4">
<span class="block w-full h-3 bg-gray-300 rounded-full" :class="{ 'mt-3': n > 1 }" v-for="n in post.textLength" v-if="post.textLength" />
<span class="block w-2/3 h-3 bg-gray-300 rounded-full" :class="{ 'mt-3': post.textLength }" />
</main>
<footer class="w-full flex items-center py-3 px-4">
<span class="block flex-grow h-8 border rounded-full"></span>
<span class="block w-6 h-6 bg-gray-300 rounded-full ml-3"></span>
</footer>
</span>
</script>