vue上拉加载更多

mac2024-05-15  26

基于VUE的上拉加载更多

在VUE的组件开发中使用下拉加载因为是传值的模式,所以必须赋值,并不能像js那种生成节点的模式,否则会覆盖原有的值。

1.在data中定义四个值

data() { return { message: [],//向子组件传值的数组 state: true,//判断是否发送请求 count:1,//当前页 pagenum: 2,//总页数 } },

2.methods部分

methods: { handleScroll() { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = document.documentElement.clientHeight || document.body.clientHeight; let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; let numHeight = scrollTop + clientHeight //以上是获取页面高度、滑轮高度,页面内部高度并做了兼容。 if (scrollHeight > clientHeight && numHeight > scrollHeight - 0.7) { //if判断-0.7是实测,小白白的我也不懂为啥直接>=不行 if (this.count >= this.pagenum){ this.state = false; $(".span").text("亲,已经没有更多了") return; } else { this.count++; this.state = true; this.getSpecialData(); $(".span").text("正在加载中。。。") } } }, getSpecialData() { if (this.state = true) { this.state = false //this.$http 等价于axios 封装过 this.$http({ method: 'POST', url: '填写后端给的接口', data: { //给后台传。。。 page: this.count }, }).then(res => { this.pagenum = res.data.data.num console.log(res.data.data) if (this.count == 1) { let arr = []; res.data.data.branch.forEach((item, index)=>{ let img2 = this.$h.http + item.thumb; arr[index] = { src: img2, fonts: item.content, id: item.id, author :item.admin, title:item.title, time:item.createtime, } }) this.message.push(...arr); } else { let arr = [] res.data.data.branch.forEach((item, index) => { let img2 = this.$h.http + item.thumb; arr[index] = { src: img2, fonts: item.content, id: item.id, author :item.admin, title:item.title, time:item.createtime, } }) this.message.push(...arr);//es6的新语法 console.log(this.message) } this.topImgSrc = this.$h.http + res.data.data.ad_info.thumb_url; }).catch(err => { console.log('请求错误!是:' + err); }) } } },
最新回复(0)