1.注意点
注意父级元素一定要设置高度(如果顶部底部有固定元素减去顶部底部元素的高度) 否者下拉刷新会存在问题
2.父级元素在css中加上该属性(-webkit-overflow-scrolling: touch;) 避免在IOS上存在问题
截图如下:
代码如下:
<template>
<div>
<div class="fixTop"></div>
<div id="content" v-bind:style="{'height': clientHeight-120 + 'px' }">
<!-- <div id="content" > -->
<mt-loadmore
class="loadmore"
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
:auto-fill="false"
ref="loadmore"
>
<!-- 页码为1时提示信息 -->
<!-- v-bind:style="{'min-height': clientHeight-120 + 'px' }" -->
<div class="wrap" v-bind:style="{'min-height': clientHeight-120 + 'px' }">
<div class="item" v-for="(data,index) in list" :key="index" >
<div class="name">{{index}}</div>
</div>
<div v-show="allLoaded">没有更多</div>
</div>
</mt-loadmore>
</div>
<div class="fixBottom"></div>
</div>
</template>
<script>
import { list, list2 } from "../fetch/api";
import { fetch } from "../fetch/fetch";
//默认会加载一次上拉
export default {
data() {
return {
list: [],
allLoaded: false,
pageStart: 1,
clientHeight: 0
};
},
mounted: function() {
this.getList(); //第一次的数据
//原生获取屏幕高度
this.clientHeight =
document.documentElement.clientHeight || document.body.clientHeight;
console.log(this.clientHeight);
},
activated() {
//原生获取屏幕高度
var h = document.documentElement.clientHeight || document.body.clientHeight;
console.log(h);
},
watch: {
},
methods: {
loadTop: function() {
console.log("下拉");
this.pageStart = 1;
this.allLoaded = false; // 可以进行上拉
this.$refs.loadmore.onTopLoaded();
this.getList();
},
loadBottom: function() {
console.log("上拉");
this.$refs.loadmore.onBottomLoaded();
this.pageStart++;
this.getList();
},
// 商品列表
getList: function(done) {
var that = this;
list2({
type:1,
page:that.pageStart
}).then(function(data) {
console.log(data.data);
var list = data.data;
console.log("页码" + that.pageStart);
if (that.pageStart == 1) {
that.concatList = [];
} else {
that.concatList = that.list;
}
if (list.length < 10) {
console.log("加载完毕到底了");
that.allLoaded = true; // 禁止上拉
}
that.list = list.concat(that.concatList);
})
}
}
};
</script>
<style>
#content {
width: 100%;
overflow: scroll;
overflow-y: scroll;
background: pink;
-webkit-overflow-scrolling: touch;
position: relative;
top: 50px;
/* height: 500px; */
}
.item {
width: 100%;
height: 100px;
margin-bottom: 0;
background: #ccc;
margin-bottom: 2px;
}
.wrap {
/* min-height: 500px; */
}
.fixTop {
width: 100%;
height: 50px;
background: red;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
.fixBottom {
width: 100%;
height: 50px;
background: red;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
}
</style>