1

我正在使用vue-masonry 插件,它可以让我轻松创建砌体网格。

我创建了一个无限加载系统,您可以滚动到页面底部,并将新图片附加到与 vue-masonry 插件绑定的数组中。

当我为其他用户上传的新图片创建一个轮询系统时,就会出现问题。这些新图片需要位于砌体网格的顶部。

该插件使用两个 Vue 指令masonry(父)和masonryTile(元素)。masonryTile有一个 v-for which 循环遍历与我的 Vue 实例绑定的数组(它完成了所有繁重的工作、预加载、清理等......)。

指令中有没有办法知道附加或附加的东西之间的区别?并尝试做出不同的反应(我知道 masonry 有一些 append/prepend 方法)但是在这里和使用这个插件,已经添加的项目(在开始时 prepend 与 Vue 一起使用)但是没有砌体交互也没有重绘(我试过使用原型触发重绘this.$redrawVueMasonry();)。

所以我不知道接下来要做什么。继续寻找一种方法来区分前置和附加,并尝试将其绑定到相应的砌体方法?或者另一种我没有想到的方法......

提前感谢您的帮助

Ps:我认为我的代码并不真正相关,因为它更多是优化插件的一种方式。如果您想要我的代码的某些特定部分,请在评论中告诉我!

4

1 回答 1

5

这可能来得太晚了,这是一个 10 个月大的问题。但是vue-masonry能够处理项目在数组中任意位置拼接的情况。但是要正确更新网格this.$redrawVueMasonry()应该在this.$nextTick()中调用,如下所示:

this.$nextTick(() => this.$redrawVueMasonry());

希望这会有所帮助,如果不是原始海报,其他人。

于 2018-07-24T14:07:03.597 回答