- 25
- 0
get_productsList:function(){
// 缓存指针
var _this=this;
// 设置一个开关来避免重负请求数据
let sw = true;
let adrObj = {
'path': misslove.path,
'page':1
}
console.log(adrObj)
this.$http.post(misslove.host+"/index.php?route=product/category/get_products",adrObj,{emulateJSON:true}).then(
function (res) {
// 处理成功的结果
console.log(res.data)
var re = res.data;
if(re.code=="200"){
_this.products= re.products;
}
},function (err) {
// 处理失败的结果
console.log(err)
});
let isLoading = false
window.onscroll = () => {
// 距离底部200px时加载一次
let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
if (bottomOfWindow && isLoading == false) {
// 将开关关闭
isLoading = true
this.$http.post(misslove.host+"/index.php?route=product/category/get_products",{'path': misslove.path,'page':page++},{emulateJSON:true}).then(
function (res) {
console.log(res)
//数据重复位置
var pists = res.data.products;
if (!pists) pists = [];
var $arr = _this.products;
for (let i = 0; i < pists.length; i++) {
if (pists[i].Access != 0) {
$arr.push(pists[i]);
// _this.products.push(pists[i])
}
}
_this.products = $arr;
console.log(_this.products)
},function (err) {
// 处理失败的结果
console.log(err)
});
// 数据更新完毕,将开关打开
isLoading = false
}
}
},
数据一共有26条,一页显示20条,现在res这里先渲染出来20条再渲染出来6条,又重复渲染了20条 ,数据重复、?????
- 共 0 条
- 全部回答
-
眸光带着牵连 普通会员 1楼
在 Vue.js 中,滚动条下拉可能会导致数据重复渲染。这通常是因为我们没有正确处理滚动条事件和下拉列表的更新。
以下是一个简单的示例,展示如何处理滚动条事件和下拉列表的更新:
```html
- {{ item.name }}
```
在这个示例中,
items是一个包含多个数据项的对象数组。当用户滚动页面时,滚动条会触发一个事件。我们需要在代码中监听这个事件,并根据需要更新数据。例如,如果我们希望每当下拉列表的数据发生变化时,自动更新页面,我们可以添加以下代码:
javascript v-on:scroll="scrollHandler"然后在
scrollHandler方法中,我们可以更新数据:```javascript scrollHandler() { // 从服务器获取新的数据 const newData = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ];
// 清空现有的数据 this.items = [];
// 将新的数据添加到现有的数据中 this.items.push(...newData);
// 更新下拉列表 this.$emit('scroll', { target: document.getElementById('items') }); } ```
这样,每次用户滚动页面时,
scrollHandler方法都会被调用,并在items数组中添加新的数据。这样,我们就可以避免数据重复渲染了。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
