vue+vux移动端上拉加载更多，遇到的坑
项目属于嵌入h5.挂在企业微信。由于列表过多，一般电脑端使用分页，但是手机端分页不合理，所以计划用上拉到底部加载更多，实现分页。
一开始百度查到很多都是再用监听页面滚动事件 window.addEventListener('scroll', this.scrollBottom) ，在苹果上还好说，在安卓手机上的话如果一直上划的话，请求一直在进行，上拉多久请求多久，放开以后请求速度也慢，代码如下。有坑啊。。。
mounted () {
// 添加滚动事件，检测滚动到页面底部
window.addEventListener('scroll', this.scrollBottom)
},
beforeDestroy () {
window.removeEventListener('scroll', this.scrollBottom); //离开页面时移除
},
methods: {
scrollBottom () {
this.scrollH = document.body.scrollTop||document.documentElement.scrollTop;
this.docH = document.body.scrollHeight||document.documentElement.scrollHeight;//文档高度
this.windowH = window.innerHeight||document.body.clientHeight||document.documentElement.clientHeight;//浏览器窗口高度
//滚动到底部和页面没有正在执行请求网络数据的过程中的条件要同时成立才可以执行请求请求数据操作
if((this.scrollH + this.windowH)-0 >= (this.docH-2) && !this.showLoading){
// 发起请求前需要阻止页面滚动
this.tip = '加载中'
this.showloadmore = true
// 判断请求数量是否大于合同总数
if(this.henum <= (this.PageIndex*this.starobjectarrnum)) {
this.tip = '没有更多'
this.showloadmore = false
return false
}
this.PageIndex += 1
console.log(this.PageIndex)
// 加载数据
this.loadArticle()
} else {
return false
}
},
}
后来这个去找原因找了一天。找到原因由于自己技术问题，一直解决不了。所以换了种方法。结果还是不错的，完美解决问题，ios、安卓都没问题，不说了，上代码
<template>
<div class="stocklist">
<div @touchstart="touchStart($event)" @touchend="touchEnd($event)">
<!-- 列表 -->
<div class="contract_list">...</div>
<x-button v-show="isOriginHei" class="addrece_btn" @click.native="back">返回</x-button>
<loading v-model="showLoading" text="获取数据中"></loading>
<div v-if="starobjectarrnum > 0 && henum >= 5">
<load-more v-if="showloadmore" :tip="tip"></load-more>
<load-more v-else :show-loading="false" :tip="tip"></load-more>
</div>
</div>
</div>
</template>
<script>
import { Flexbox, FlexboxItem, AlertModule, XButton, Divider, LoadMore, Search, Group, Datetime } from 'vux'
export default {
name: 'stocklist',
data () {
return {
datatext: '录入时间',
showLoading: false,
tabindex: 0,
henum: 0,
objectArray: [],
tip: '加载更多',
showloadmore: false,
PageIndex: 1,
starobjectarrnum: 5,
startY: 0,
isLoading: false,
}
},
components: {
Flexbox,
FlexboxItem,
AlertModule,
XButton,
Divider,
LoadMore,
Search,
Group,
Datetime
},
created () {
this.tabindex = this.$route.query.page
this.showLoading = true
// 请求数据
this.loadArticle()
},
methods: {
touchStart(e) {
// 记录按下位置
this.startY = e.targetTouches[0].pageY;
},
touchEnd(e) {
// 计算移动
if (this.isLoading) {
return;
}
let endX = e.changedTouches[0].pageX,
endY = e.changedTouches[0].pageY,
dy = this.startY - endY;
//判断是否向上滑动
if(dy <= 0) {
return false
}
if(dy < 20) {
return;
}
let scrollHeight = this.$el.scrollHeight;
let scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
// 判断是否滑动到底部
if (this.startY+dy >= scrollHeight) {
//滑动距离到底部并且继续下拉
this.scrollToEnd(e)
}
},
scrollToEnd(e) {
// 移动执行判断
let scrollHeight = this.$el.scrollHeight;
let clientHeight = this.$el.clientHeight;
let scrollTop = this.$el.scrollTop;
if (scrollTop + clientHeight >= scrollHeight && !this.showLoading) {
this.doLoadMore()
}
},
doLoadMore() {
this.isLoading = true
this.tip = '加载中...'
this.showloadmore = true
if(this.henum <= (this.PageIndex*this.starobjectarrnum)) {
this.tip = '没有更多'
this.showloadmore = false
return false
}
this.PageIndex += 1
console.log(this.PageIndex)
// 加载数据
this.loadArticle()
},
loadArticle () {
let self= this
this.showLoading = true
this.datatext = "录入时间"
//请求合同数据
var userdata = {...}
this.$get('/xxxxxxxx',userdata)
.then(res =>{
this.isLoading = false
this.showLoading = false
this.tip = '加载更多'
this.showloadmore = false
})
.catch(e => {
this.isLoading = false;
this.showLoading = false
this.tip = '加载更多'
this.showloadmore = false
// console.log(e)
AlertModule.show({
title: '不好意思',
content: "服务器繁忙"
})
})
}
}
}
</script>
