vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载
作者：CloudEmperor
这篇文章主要介绍了vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue2.0和mintui-infiniteScroll实现无线滚动加载
<template lang="html">
<div class="main">
<div class='list-box'>
<ul v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-immediate-check="true"
infinite-scroll-distance="40">
<li v-for="(item ,index) in list" :key="index">
{{item.title}}
</li>
</ul>
<!--显示加载中状态-->
<div class="loading-box" v-if="loading">
<mt-spinner type="fading-circle" class="loading-more" color="#0188fd"></mt-spinner>
</div>
<div class="no-more" v-if="noMore">亲，已经到底了哦！</div>
</div>
</div>
</template>
<script>
import { InfiniteScroll , Spinner } from 'mint-ui';
export default {
components: {
'mt-spinner':Spinner,
},
data() {
return {
list: [],
pagesNum: 1,//总页数
loading: false, // 加载中转圈
noMore: false, // 是否还有更多
endTime: "",
page: {
access_token: this.$route.query.access_token,
planId: this.$route.query.id,
pageNumber: 1,
pageSize: 20,
}
}
},
created() {
this.initData();
},
mounted() {
},
methods: {
initData: function(type) {
this.loading = true
axios.get("xxx", {
params: this.page
})
.then((data) => {
if (type === 'loadMore') {
this.list = this.list.concat(data.data.data.list);
} else {
this.list = data.data.data.list;
}
// 设置分页
this.pagesNum = data.data.data.pages; //总页数
this.loading = false;
})
.catch(function(err) {
console.log(err);
})
},
loadMore:function() {
this.page.pageNumber += 1 // 增加分页
this.loading = true // 加载中
if(this.page.pageNumber <= this.pagesNum){
//加载数据
setTimeout(()=>{
this.initData('loadMore')
},200)
}else{
this.noMore = true // 显示没有更多了
this.loading = false // 关闭加载中
return false
}
}
}
}
</script>
<style>
.list-box {
max-height:calc(100% - 1.8rem); //必须有高度
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.list-box ul{
width:100%;
}
.list-box ul li{
width: 100%;
height: 0.55rem;
@include flexbox();
@include justify-content(space-between);
border-bottom: 1px solid #e4e4e4;
}
</style>vue使用mint-ui的Infinite scroll（无线滚动）报错
MutationObserver': parameter 1 is not of type 'Node'." * Failed
在Vue里面使用mint-ui的Infinite scroll无线滚动，按照配置写完之后，发现控制台里报错了。
如下错误信息：
Error in directive infinite-scroll inserted hook: “TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”
Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.
解决方法
给使用这个组件的元素设置height和overflow
<div class="wrap" v-infinite-scroll = "loadMore" infinite-scroll-disabled = "loading" infinite-scroll-distance = "10" ></div>
.wrap {
height: 100vh;
overflow-y: auto;
}然后控制台就不会报错了。然而官网并没有写这条非常重要的信息。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。