数码资讯
vue项目 h5上拉加载（分页功能）
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
<template>
<div class="receivable">
<div class="application-header flex-betweenCenter" @click="goBack">
<img
class="prod-header-navImg"
src="../../assets/images/icon_back.png"
alt=""
/>
<div class="font18 hy_color weightBold">登录日志</div>
<div></div>
</div>
<div class="receivable-main">
<ul class="scroll-box" :style="{ height: clientHeight + 'px' }" v-if="is_number==1" @scroll="handleScroll($event)">
<li class="log-ul-li" v-for="item in list" :key="item.id">
<div>
<div>{{ item.type }}</div>
<div class="log-color">{{ item.create_time }}</div>
</div>
<div>{{ item.operate }}</div>
</li>
<div class="bottom-tishi">{{loadingText}}</div>
</ul>
<div v-if="is_number == 2">
<div class="emptaype-box">
<img src="../../assets/images/empty_order.png" alt="" />
<p>暂无数据哦！~</p>
</div>
</div>
</div>
<div class="receivable-footer"></div>
</div>
</template>
<script>
import { storage } from "@/utils/storage";
export default {
name: "Receivable",
data() {
return {
is_number: 1，
p: 1,
list: [],
timer: null,
loadingText:'',
clientHeight: null
};
},
created() {this._getUserLoginLog();
this.clientHeight = +document.documentElement.clientHeight -60
},
methods: {
goBack() {
this.$router.go(-1);
},
_getUserLoginLog() {
let data = {
token: this.token,
p: 1,
};
this.$api.getUserLoginLog(data).then((res) => {
if (res.data.length > 0) {
this.list = res.data;
this.is_number = 1;
this.p++
} else {
this.is_number = 2;
}
});
},
handleScroll(e) {
//这里使用个延时加载，不然滑动屏幕的时候会不断触发方法，去计算高度，浪费性能
let that = this
clearTimeout(this.timer)
that.timer = setTimeout(function () {
let clientHeight = e.target.clientHeight;
let scrollTop = e.target.scrollTop;
let scrollHeight = e.target.scrollHeight;
console.log(clientHeight,scrollTop,scrollHeight)
if (clientHeight + scrollTop >= scrollHeight - 10) {
that.getUserLoginLogMeuns()
}
}, 500);
},
getUserLoginLogMeuns() {
this.loadingText = '加载更多'
let data = {
token: this.token,
p: this.p,
};
this.loadingText = '加载中...'
this.$api.getUserLoginLog(data).then((res) => {
if (res.data.length > 0) {
this.list = this.list.concat(res.data)
this.is_number = 1
} else if(res.data.length==0){
this.loadingText = '没有更多了'
}
this.p++
});
},
},
};
</script>