Vue.js 隐藏当前视口外的项目 [英] Vue.js hiding of items outside current viewport

问题描述

我正在 Vue.js 中制作一个电子商务类型的菜单，其中的项目是包含大量功能和图像的 div.当渲染大约 200 个这样的项目时，性能相当不错，但是当添加的数量超过这个数量时，站点开始运行缓慢.

如果 Vue 元素在当前可滚动视图之外(如 iOS 中的 ScrollViews)，有条件地从 DOM 中隐藏或删除 Vue 元素的最佳方法是什么?是否有任何插件或库可以帮助提高 Vue.js 中长数据项列表的性能?

谢谢！

解决方案

我已经使用我在评论中提到的包制作了一个演示片段.

我制作了一个充当观察者的信号"项目.当信号"项离开视口时，不再呈现复杂的东西".我是这样做的，所以你可以看到复杂的东西"消失了.当信号"滚动回视图时，呈现复杂的东西".

您可以将观察者放在小部件根元素上，只有当整个小部件不在视野中时，才会隐藏内容.但是，您不想将 v-if 放在根元素上，否则它一旦消失就永远不会回来.

const containerMonitor = scrollMonitor.createContainer(document.body);新的 Vue({el: '#app',数据: {id: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]},成分: {小部件:{模板: '#widget-template',道具:['id']，数据() {返回 {可见:真实};},安装(){const elementWatcher = containerMonitor.create(this.$el.querySelector('.signal'));elementWatcher.enterViewport(() => {this.visible = true;});elementWatcher.exitViewport(() => {this.visible = false;});}}}});

.widget-container {高度:200px；边距:10px；背景色:#f0f0f0；显示:弹性；flex-flow:行包装；}.信号 {高度:10px；宽度:10px；边距:30px；背景颜色:红色；边框:薄纯蓝色；}.复杂的东西{弹性基础:100%；填充:15px；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script><script src="https://rawgit.com/stutrek/scrollMonitor/master/scrollMonitor.js"></script><模板 id="widget-template"><div class="widget-container"><div class="信号">

<div v-if="visible" class="complex-stuff">这是小部件 {{id}}.等等等等等等.

<div id="应用程序">下面的小部件:<widget v-for="id in ids" :id="id"></widget>:上面的小部件

I'm making an e-commerce type menu in Vue.js, with items which are divs that contain a fair amount of functionality and images. Performance is fairly good when rendering about 200 of these items, but when more than that many are added the site begins to perform sluggishly.

What's the best way to conditionally hide or remove Vue elements from the DOM if they are outside the current scrollable view (like ScrollViews in iOS)? Are there any plugins or libraries that can help with the performance of long lists of data items in Vue.js?

Thanks!

解决方案

I've made a demo snippet using the package I mentioned in my comment.

I've made a "signal" item that acts as the watcher. When the "signal" item leaves the viewport, the "complex-stuff" is no longer rendered. I did it this way so you can see the "complex-stuff" disappear. When the "signal" scrolls back into view, the "complex-stuff" is rendered.

You could just put the watcher on the widget root element and things will only be hidden when the whole widget is out of view. You don't want to put the v-if on the root element, though, or it will never come back once it goes away.

const containerMonitor = scrollMonitor.createContainer(document.body);

new Vue({
  el: '#app',
  data: {
    ids: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
  },
  components: {
    widget: {
      template: '#widget-template',
      props: ['id'],
      data() {
        return {
          visible: true
        };
      },
      mounted() {
        const elementWatcher = containerMonitor.create(this.$el.querySelector('.signal'));

        elementWatcher.enterViewport(() => {
          this.visible = true;
        });
        elementWatcher.exitViewport(() => {
          this.visible = false;
        });
      }
    }
  }
});

.widget-container {
  height: 200px;
  margin: 10px;
  background-color: #f0f0f0;
  display: flex;
  flex-flow: row wrap; 
}

.signal {
  height: 10px;
  width: 10px;
  margin: 30px;
  background-color: red;
  border: thin solid blue;
}

.complex-stuff {
  flex-basis: 100%;
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://rawgit.com/stutrek/scrollMonitor/master/scrollMonitor.js"></script>

<template id="widget-template">
  <div class="widget-container">
    <div class="signal">
    </div>
    <div v-if="visible" class="complex-stuff">
      This is widget {{id}}.
      Blah blah blah.
    </div>
  </div>
</template>

<div id="app">
  Widgets below:
  <widget v-for="id in ids" :id="id"></widget>
  :widgets above
</div>

这篇关于Vue.js 隐藏当前视口外的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！