Question

我有100多个项目的列表，渲染需要花费太多时间。我想只显示一次可见，然后停留在滚动上。

最好的方法是什么？

我在下面有这个片段，但是vue.set（）无效。

var dbItems = [{name: 'New item'}, {name:'Another'}, {name:'Third'}];

var app = new Vue({
  el: '#app',
  data: {
    // if I put items : dbItems, then for some reason the Vue.set() doesn't work!!
   items : [],
  },
  methods: {
    init: function () {
      this.items = dbItems; // we add all items
    },
    makeItemVisible : function(id) {
      console.log("Making visible #"+id);
      this.items[id].show = 1;
      Vue.set(this.items, id, this.items[id]);
    }
   }
});

app.init();
app.makeItemVisible(1); // this works

$(document).on('scroll', function(){
  // function to show elements when visible
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<div id="app" v-cloak>

<button v-on:click="makeItemVisible(0)">MAKE VISIBLE - This button doesn't work</button>

  <div class="items" v-show="items.length">
    <!-- I dont know why, but (key, item) had to be switched compared to VUE documentation! -->
	  <div v-for="(key, item) in items">
         <div v-if="item.show" style="border:2px solid green;height:700px">
            You can see me: {{ item.name }} | ID: {{ key }}
        </div>
        <div class="item-blank" data-id="{{ key }}" v-else style="border:2px solid red;height:700px">
         {{ item.name }}  invisible {{ key }}
        </div>
		</div>
  </div>

</div>

Answer 1

<强>解决。

编辑：此Vue.js仅在Chrome中可用...否则速度非常慢（Firefox速度最慢），一旦以HTML格式加载整个文档，效果会更好。

＆＃13;

var dbItems = [{name: 'New item'}, {name:'Another'}, {name:'Third'}];

var app = new Vue({
  el: '#app',
  data: {
   items : dbItems
  },
  methods: {
    makeItemVisible : function(id) {
      console.log("Making visible #"+id);
      Vue.set(this.items[id], 'show', 1);
    }
  }
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemTop <= docViewBottom && elemTop >= docViewTop) || (elemBottom >= docViewTop && elemBottom <= docViewBottom);
}

var fn = function(){
  $('.item-blank').each(function(){
    if(isScrolledIntoView(this)) {
      app.makeItemVisible($(this).attr('data-id'));
    }
  });
};
$(window).scroll(fn);
fn(); // because trigger() doesn't work

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app" v-cloak>
  <div class="items" v-show="items.length">
	  <div v-for="(item, index) in items">
         <div v-if="item.show" style="border:2px solid green;height:700px">
            You can see me: {{ item.name }} | ID: {{ index }}
        </div>
        <div class="item-blank" :data-id="index" v-else style="border:2px solid red;height:700px;position:relative;">
         {{ item.name }}  invisible {{ index }}
        </div>
		</div>
  </div>

</div>

＆＃13;

vue.js - 在可见时动态渲染滚动项

1 个答案: