vue-observe visibility-一次对所有页面进行api调用
vue-observe visibility-一次对所有页面进行api调用
提问于 2021-05-29 03:45:47
我正在使用vue，并且已经安装了npm包vue-observe-visibility。我目前已经将v-observe-visibility="visibilityChanged"放到了选择列表<option>上；
在visibilityChanged方法中，我有以下内容
visibilityChanged (isVisible) {
if (!isVisible) {return}
this.isVisible = isVisible
this.page++;
this.$emit('getMoreData', this.page)
},因此，页面递增并发出一个事件，该事件调用getMoreData()方法并以每页15的增量返回分页数据。
方法
getMoreData (page) {
if(page > this.lastPage) {return}
axios.get(`${this.userDataUrl}?page=${page}`).then(response => {
this.items.push(...response.data.data);
this.lastPage = response.data.last_page;
});
},HTML
<div>
<select onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'> //to make select have scrollable feature
<option
v-if="items.length" v-observe-visibility="visibilityChanged"
v-for="item in items"
value="item.id"
:key="item.id"
>
<slot name="item" v-bind:item="item" />
</option>
</select>
</div>问题是，只要我打开下拉列表，就会为每个页面调用getMoreData方法，因此它会在打开选择列表后进行刷新。我在我的网络选项卡中看到，它会立即呼叫?page=2,3,4等……当我向下滚动到下一页时，我如何才能只调用下一页呢？
回答 1
Stack Overflow用户
发布于 2021-07-03 00:06:30
将v-observe-visibility="visibilityChanged"移动到位于页面上项目下方的对象(<div>)上，而不是移动到每个项目上。每一项都是可见的，因此它会触发每个页面的加载。另外，我不确定在select中使用它是不是最好的用例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67744697
复制相关文章
相似问题
腾讯云开发者
