二十四、Vue之移动端框架MintUI之上拉分页加载更多
1.引入上拉刷新组件 Infinite Scroll
InfiniteScroll.vue
<template> <div>
<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<li v-for="(item,key) in list" :key="key">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: []
}
},
methods: {
loadMore() {
console.log('加载中');
}
}
}
</script>
App.vue
<template> <div id="app">
<v-infinitescroll></v-infinitescroll>
</div>
</template>
<script>
// 引入组件
import InfiniteScroll from "./components/InfiniteScroll.vue";
export default {
name: 'app',
data() {
return {
list: []
}
},
components: {
// 2.挂载组件
'v-infinitescroll': InfiniteScroll
}
}
</script>
经过测试即可发现，当页面加载时，会运行 InfiniteScroll#loadMore() 方法，说明该方法类似于生命周期 mounted() 方法，在页面渲染之后调用。利用这一特性，我们可以直接在 InfiniteScroll#loadMore() 方法中请求数据。
2.请求网络数据，实现下拉刷新
<template> <div id="scroll">
<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<li v-for="(item,key) in datas" :key="key">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
datas: [],
page: 1
}
},
methods: {
loadMore() {
this.requestData();
},
// 请求网路数据，实现下拉刷新
requestData() {
var url='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
this.$http.get(url).then((res) => {
// 和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
this.datas=this.datas.concat(res.body.result);
// 刷新一次，页码增1
++this.page;
}, (err) => {
console.log(err);
});
}
}
}
</script>
<style lang="scss" scoped>
#scroll{
li{
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
}
</style>
注意一：和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
this.datas=this.datas.concat(res.body.result)注意二：要想实现下拉刷新，必须刷新一次，页码增1
问题1：当下拉刷新时，会出现重复请求数据，如下：
原因解析：出现这样的原因在于，mint-ui在底层将InfiniteScroll#loadMore() 方法进行异步执行。这样，当请求耗时过长还未完成时，还未执行到++this.page，此时若用户再次下拉，依然会触发请求数据，但this.page依然是上一次请求的数值，所以导致了出现重复请求数据。
解决办法：通过 loading 属性来控制请求开始时，禁止触发下拉刷新（PS：当 loading 为 true 时，不再触发下拉刷新，为 false 则可触发下拉刷新）
<script>export default {
data() {
return {
datas: [],
page: 1,
// 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
loading: false
}
},
methods: {
loadMore() {
this.requestData();
},
// 请求网路数据，实现下拉刷新
requestData() {
// 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
this.loading = true;
var url='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
this.$http.get(url).then((res) => {
// 和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
this.datas=this.datas.concat(res.body.result);
// 刷新一次，页码增1
++this.page;
// 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
this.loading = false;
}, (err) => {
console.log(err);
});
}
}
}
</script>
问题2：当下拉刷新到第7页时，已经再无数据返回，此时再下拉刷新无意义。
解决办法：通过返回数据长度控制禁止触发下拉刷新（PS：返回数据长度小于每页数量时，此时可将 loading 设置为true，禁止再次下拉刷新），如下：
<script>export default {
data() {
return {
datas: [],
page: 1,
// 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
loading: false
}
},
methods: {
loadMore() {
this.requestData();
},
// 请求网路数据，实现下拉刷新
requestData() {
// 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
this.loading = true;
var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
this.$http.get(url).then((res) => {
// 和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
this.datas = this.datas.concat(res.body.result);
// 刷新一次，页码增1
++this.page;
if (res.body.result.length < 20) {
this.loading = true;
} else {
// 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
this.loading = false;
}
}, (err) => {
console.log(err);
});
}
}
}
</script>
以上是 二十四、Vue之移动端框架MintUI之上拉分页加载更多 的全部内容， 来源链接： utcz.com/z/377498.html
