-
不负昭华2017-12-11 00:00
- 11
- 54
- 0
假如有5个以下格式的json数据，页面首先加载page1给用户，如果content数据量等于10条，
当用户滚动到底部的时候，继续请求page2.如果page1的数据量小于10条说明page2没有内容，不进行
请求.依次类推，如果能用vue做的话就更好了
如果page1数据=10条，我如何保证滚动到可视区域底部的时候，
page2结果返回成功的时候，才能再次请求page3，而不是重复请求
//page1
{
"msgflag":1,
"content":[
{"age":1},
{"age":2},
{"age":3},
{"age":4},
{"age":5},
{"age":6},
{"age":7},
{"age":8},
{"age":9},
{"age":10},
]
}
//page2
{
"msgflag":1,
"content":[
{"age":11},
{"age":12},
{"age":13},
{"age":14},
{"age":15},
{"age":16},
{"age":17},
{"age":18},
{"age":19},
{"age":20},
]
}<div class="header"></div>
<ul class="main">
<li v-for="item in content">{{item.age}}</li>
</div>
<div class="footer"></div>- 共 0 条
- 全部回答
-
汐颜兮梦 普通会员 1楼
在JavaScript中实现分页功能，可以使用
Promise.all方法来模拟异步操作，使用page变量来记录当前页数，使用LIMIT参数来获取每页的数据数量，使用request方法来获取数据，使用forEach方法来遍历数据。以下是一个简单的实现：
``javascript function fetchData(page) { return new Promise((resolve, reject) => { const data = []; const LIMIT = 10; const request = async () => { const response = await fetch(https://example.com/data?page=${page}&LIMIT=${LIMIT}`); response.json().then(data => { resolve(data); }) .catch(err => { reject(err); }); }; request(); }); }fetchData(1).then(data => { console.log(data); }).catch(err => { console.log(err); }); ```
在这个例子中，
fetchData函数接受一个页数参数，并返回一个Promise。在Promise中，我们首先初始化一个空数组data，然后创建一个LIMIT参数为10的异步请求，获取数据。如果请求成功，我们使用resolve方法来更新data数组，并返回。如果请求失败，我们使用reject方法来更新err数组，并返回。然后，我们调用
fetchData函数，并使用then方法来处理返回的Promise。在then方法中，我们打印出数据数组。最后，我们调用
fetchData函数，并使用catch方法来处理返回的Promise。在catch方法中，我们打印出错误数组。
-
放烟火的小笨蛋 普通会员 2楼
在JavaScript中实现分页功能，可以使用
Promise.all方法来模拟异步操作，使用page变量来记录当前页数，使用LIMIT参数来获取每页的数据数量，使用request方法来获取数据，使用forEach方法来遍历数据。以下是一个简单的实现：
``javascript function fetchData(page) { return new Promise((resolve, reject) => { const data = []; const LIMIT = 10; const request = async () => { const response = await fetch(https://example.com/data?page=${page}&LIMIT=${LIMIT}`); response.json().then(data => { resolve(data); }) .catch(err => { reject(err); }); }; request(); }); }fetchData(1).then(data => { console.log(data); }).catch(err => { console.log(err); }); ```
在这个例子中，
fetchData函数接受一个页数参数，并返回一个Promise。在Promise中，我们首先初始化一个空数组data，然后创建一个LIMIT参数为10的异步请求，获取数据。如果请求成功，我们使用resolve方法来更新data数组，并返回。如果请求失败，我们使用reject方法来更新err数组，并返回。然后，我们调用
fetchData函数，并使用then方法来处理返回的Promise。在then方法中，我们打印出数据数组。最后，我们调用
fetchData函数，并使用catch方法来处理返回的Promise。在catch方法中，我们打印出错误数组。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部