首先要有三个参数:
1.计算该容器的固定高度 clientHeight
2.计算滚动条距离顶部的距离 scrollTop
3.计算该容器内内容的高度 scrollHeight
当 clientHeight >= scrollHeight - scrollTop时,即为上拉触底;
以vue为例(部分代码):
<template>
<div class="dynamic-data" ref="activity_scroll" @scroll="activityScroll">
<div class="item" v-for="item in activityDynamic">
<div class="left-headimg">
<img src="../../assets/imgs/manage.png" alt="" class="img" v-if="item.member == ''">
<img :src="item.member.avatarUrl" alt="" class="img" v-else>
</div>
<div class="right-content">
<div class="thing" v-if="item.member == ''">管理员 {{item.status}}了 <b class="sign">{{item.thing}}</b> 活动</div>
<div class="thing" v-else>{{item.member.nickName}} {{item.status}}了 <b class="sign" @click="activityDetails(item)">{{item.thing}}</b> 活动</div>
<div class="date">{{item.time}}</div>
</div>
</div>
<div class="nodata" v-if="activityDynamic.length == 0">暂无活动数据</div>
<div class="activity-loading">
<Spin size="large" v-show="activityLoading"></Spin>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {
},
mounted() {
},
methods: {
//活动区域的滚动事件
activityScroll(){
var clientHeight = this.$refs.activity_scroll.clientHeight; //该容器的固定高度
var scrollTop = this.$refs.activity_scroll.scrollTop; //滚动条距顶部的距离
var scrollHeight = this.$refs.activity_scroll.scrollHeight; //内容的高度
if(scrollHeight - scrollTop <= clientHeight){
console.log('上拉触底了');
}
},
}
}
</script>
<style lang="scss" scoped>
.dynamic-data {
height: 420px;
padding: 0 30px;
overflow: auto;
}
</style>