2024年Web前端最新Vue实现上拉加载（mui框架）无限加载新数据(1)，2024年最新前端面试知识点

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

this.heads = [‘Item 1’, ‘Item 2’, ‘Item 3’, ‘Item 4’, ‘Item 5’, ‘Item 6’]

},

methods: {

pullupRefresh: function() {

console.log(app.heads.length)

setTimeout(function() {

//重新定义一个数组，控制每次上拉一次只加载4条数据

var addedArray = [];

for (var i = app.heads.length + 1, len = i + 4; i < len; i++) {

console.log(len)

addedArray.push(‘item’ + i);

}

app.heads = app.heads.concat(addedArray);

mui(‘#pullrefresh’).pullRefresh().endPullupToRefresh();

}, 1000);

}

}

})

mui.init({

statusBarBackground: ‘#f7f7f7’,

pullRefresh: {

container: ‘#pullrefresh’,

up: {

contentrefresh: ‘正在加载…’,

callback: app.pullupRefresh

}

}

});

小demo可以实现的是：给定固定数据，然后上拉就会显示4条其他数据，

方式是 加载四条数据放进一个数组，然后拼接到当前列表的后面

而项目要实现的是：先fetch在created获取到所有的数据，控制先显示默认10条数据，然后上拉一次增加4条，最后如果没有数据则不再显示

问题1：怎么实现加载出10条数据，

问题2：demo里面的拼接的是直接写上去的，如果要拼接的数据有很多，怎么办？也就是push(‘item’ + i)里面如何去改

所以我们要把demo改成默认放15条数据，让他先显示5条，然后加载一次显示2条，加载完成提示没有数据了

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

slice() 方法可从已有的数组中返回选定的元素。

var data = json.data;

for (var i = 0; i < 5; i++) {

app.heads.push(data[i]);

}

或者

this.heads = this.allheads.slice(0,5)

fetch(adminUrl + ‘common/newsServer/0’).then(function (response) {

return response.json();

}).then(function (json) {

app.heads = json.data;

});

需求：默认放15条数据，让他先显示5条，然后加载一次显示2条，加载完成提示没有数据了

var app = new Vue({

el: ‘#app’,

data: {

heads: [],

sliderheads:[]

},

created: function () {

//初始化数据

this.heads = [{

newsTitel: “1111111”,

newsSummary: “cdasvvf”

}, {

newsTitel: “222222”,

newsSummary: “cdasvvf”

}, {

newsTitel: “333333”,

newsSummary: “cdasvvf”

}, {

newsTitel: “4444444”,

newsSummary: “cdasvvf”

}, {

newsTitel: “555555”,

newsSummary: “cdasvvf”

}, {

newsTitel: “666666”,

newsSummary: “cdasvvf”

}, {

newsTitel: “7777777”,

newsSummary: “cdasvvf”

}, {

newsTitel: “888888”,

newsSummary: “cdasvvf”

}, {

newsTitel: “999999”,

newsSummary: “cdasvvf”

}, {

newsTitel: “1010101”,

newsSummary: “cdasvvf”

}, {

newsTitel: “1111111”,

newsSummary: “cdasvvf”

}, {

newsTitel: “121212”,

newsSummary: “cdasvvf”

}, {

newsTitel: “131313113”,

newsSummary: “cdasvvf”

}, {

newsTitel: “14141414”,

newsSummary: “cdasvvf”

}, {

newsTitel: “15155115”,

newsSummary: “cdasvvf”

}]

this.sliderheads = this.heads.slice(0,5);//第1,2,3,4,5

console.log(this.heads)

},

methods: {

pullupRefresh: function () {

//

setTimeout(function () {

//重新定义一个数组，控制每次上拉一次只加载2条数据

app.sliderheads = app.sliderheads.concat(app.heads.slice(5,7));//6,7

mui(‘#pullrefresh’).pullRefresh().endPullupToRefresh();

}, 1000);

}

}

})

目前要解决的问题：对当前所有数据分页：page，pageSize

效果：

上拉

data: {

heads: [],

sliderheads: [],

limit: 10, // 每页显示行数

totalPage: 0, // 总页数

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

heads: [],

sliderheads: [],

limit: 10, // 每页显示行数

totalPage: 0, // 总页数

最后

[外链图片转存中…(img-lfhgVlMn-1715491913838)]

[外链图片转存中…(img-XRVFtV6d-1715491913839)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】