正文
vue 使用mint-ui实现上拉加载和下拉刷新
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
解决了官网中下拉刷新存在的问题
<template>
<div class="tmpl">
<nav-bar title="商品列表"></nav-bar>
<div class="main-body" ref="wrapper" :style="{ height: (wrapperHeight-50) + 'px' }">
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="isAutoFill">
<ul class="mui-table-view mui-grid-view">
<li v-for="(item,index) in datas" :key="index" class="mui-table-view-cell mui-media mui-col-xs-6">
<a>
<img class="mui-media-object" v-lazy="item.img">
<div class="mui-media-body" v-text="item.title"></div>
</a>
</li>
</ul>
</mt-loadmore>
</div>
</div>
</template> <script>
export default {
name: "goodslist",
data() {
return {
datas: [],
//可以进行上拉
allLoaded: false,
//是否自动触发上拉函数
isAutoFill: false,
wrapperHeight: 0,
courrentPage: 0
};
},
created() {
this.loadFrist();
},
mounted() {
// 父控件要加上高度，否则会出现上拉不动的情况
this.wrapperHeight =
document.documentElement.clientHeight -
this.$refs.wrapper.getBoundingClientRect().top;
},
methods: {
// 下拉刷新
loadTop() {
this.loadFrist();
},
// 上拉加载
loadBottom() {
this.loadMore();
},
// 下来刷新加载
loadFrist() {
this.$axios
.get("goodslist1.json")
.then(response => {
this.courrentPage = 0;
this.allLoaded = false; // 可以进行上拉
this.datas = response.data.message;
this.$refs.loadmore.onTopLoaded();
})
.catch(error => {
console.log(error);
alert("网络错误，不能访问");
});
},
// 加载更多
loadMore() {
this.$axios
.get("goodslist.json")
.then(response => {
// concat数组的追加
this.datas = this.datas.concat(response.data.message);
if (this.courrentPage > 2) {
this.allLoaded = true; // 若数据已全部获取完毕
}
this.courrentPage++;
this.$refs.loadmore.onBottomLoaded();
})
.catch(error => {
console.log(error);
alert("网络错误，不能访问");
});
}
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-body {
/* 加上这个才会有当数据充满整个屏幕，可以进行上拉加载更多的操作 */
overflow: scroll;
}
</style>
