- 容器内内容足够多时才会显示滚动条,发生滚动且到达距离底部指定距离后将会触发onReachBottom事件。
- 容器高度由height控制。
- 距离底部距离由distance控制。
- 其他需求请自行修改相关代码。
一、封装组件代码
<template>
<div class="z-scoll-view-wrapper" :style="{ height: height + 'px' }">
<div class="z-scoll-view-content" :style="{ height: height + 'px' }" @scroll="scrollEvent">
<slot name="bodyer"></slot>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default {
name: 'ZScollView',
props: {
// 设置容器高度
height: {
type: Number,
default: 500
},
// 设置距离底部多少距离触发onReachBottom事件
distance: {
type: Number,
default: 300
}
},
methods: {
scrollEvent (e) {
// 滚动的像素+容器的高度>可滚动的总高度-距离底部高度
if (e.srcElement.scrollTop + e.srcElement.offsetHeight > e.srcElement.scrollHeight - this.distance) {
// 触底后触发此事件
this.$emit('onReachBottom')
}
}
}
}
</script>
<style lang="less">
.z-scoll-view-wrapper {
width: 100%;
overflow: hidden;
.z-scoll-view-content {
width: 100%;
overflow-y: auto;
}
}
</style>
二、使用示例
<template>
<ZScollView @onReachBottom="onReachBottom" :distance="scollViewConfig.distance" :height="scollViewConfig.height">
<template #bodyer> 此处存放需要滚动加载的内容 </template>
<template #footer> 此处可自定义底部动画或者加载完毕提示 </template>
</ZScollView>
</template>
<script>
import ZScollView from '@/components/ZScollView'
export default {
name: 'App',
data () {
return {
scollViewConfig: {
distance: 300, // 距离底部距离300时触发onReachBottom事件
height: 500 // 容器高度为500
}
}
},
components: {
ZScollView
},
methods: {
onReachBottom () {
// 此处可进行请求后端数据等操作(注意要自行判断是否存在正在请求的接口以进行相关限制)
console.log('下拉触底了~~~~~~~~~~~~')
}
}
}
</script>