notData: false,
typeActive: 0,
is_next: true,//用来判断是否可以继续下拉加载
mounted() {
// window.addEventListener('scroll',this.handleScroll,true)
window.addEventListener('scroll', this.load);
},
methods: {
//滚动条在Y轴上的滚动距离
getScrollTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
},
//文档的总高度
getScrollHeight() {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
},
//浏览器视口的高度
getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
},
load() {
var that = this
var t = null
if (t === null) {
t = setTimeout(() => {
if (that.getScrollTop() + that.getWindowHeight() >= that.getScrollHeight() && Number(that.listArray.length) <= Number(that.list.total) && that.is_next) {
that.is_next = false
that.params.page++
that.getData()
}
t = null
}, 30)
}
},
initData() {
var attrList = this.attrList
var supplyList = this.supplyList
var list = this.list.list
var fraction = []
var typeList = []
list.forEach((item) => {
item.isNote_c = false
})
var attrRender = attrList.filter((item, index) => {
if (item.field == 'weights' && item.title == '分数段') {
fraction.push(item)
}
if (item.field == 'type' && item.title == '类别') {
typeList.push(item)
}
return item.field !== 'weights' && item.title !== '分数段' && item.field !== 'type' && item.title !== '类别'
})
this.listArray = list
this.fractionArray = fraction
this.typeList = typeList
this.attrListArray = attrRender
this.supplyArrayList = supplyList
},
getData() {
var that = this
let url = '/Sanhuo/index'
var is_nextLoader = ''
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
axios.post(url, this.params, {
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(function (res) {
that.is_next = res.data.list.length > 0 ? true : false
that.notData = res.data.list.length > 0 ? false : true
if (that.params.page == 1) {
that.listArray = res.data.list
} else {
if (!that.notData && that.is_next) {
that.listArray = that.listArray.concat(res.data.list)
}
}
})
},
下拉加载
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 1. 爱奇艺网络加载动画。 首先我们先看一下,像爱奇艺这种网络加载动画,仔细的看一下其实也不是很难。 可以看成是两...
- MJRefresh是iOS开发用的最多的上拉加载和下拉刷新的第三方,对于MJRefreshHeader的定制也十分...