前言
一个前端小开发仔，封装一个适销对路的组件，是我们必备的基本功。
本文以实现一个vue的滚动监听组件，总结一下如何封装一个造福后人(能用)的公共组件。
需求场景
H5应用中，为了减轻后台查询数据的压力，列表常以滚动加载的形式实现。
即首次进入页面时，只请求若干条数据。当页面滚动到底部时，再次请求接口返回数据。
需求分析
由于这种业务场景十分常见，因此可封装一个通用的滚动监听组件，监听页面滚动的位置。当触发特定条件时，向外派发一个事件。
功能实现
页面滚动监听
- 当父元素的固定高度 < 内部子元素的总高度,且父元素 overflow: scroll 时，可以监听到父元素的 scroll 事件。因此，滚动列表需要插在scroll里。这里我们需要用到一个 slot 来实现。
- 由于需要绑定DOM事件，需要获得对DOM的控制。这里我们需要用到一个 refs 来实现。
- 当触发监听的条件时，我们需要对调用scroll组件的组件派发一个事件，以通知进行下一步的逻辑。这里我们需要用到一个 emit 来实现。
至此，一个滚动组件的主要功能就出来了。但是，作为一个有追求的组件，我们是不是还可以改进一下呢。
优化
防抖
滚动事件触发频率很高，因此可以做一个防抖操作，只在最后一次滚动事件触发时做判断滚动位置的操作。
绑定移除
当后台无相关数据时，就不需要再监听滚动事件，写一个解除绑定的方法，以供按需调用。
解决惯性滚动问题
手机实测时，滚动事件只在手指滑动接触屏幕时触发滚动事件。因此，当判定未到达底部时，写一个延时判断逻辑，判断是否在惯性滚动其间，元素滚动到底部。(各位大佬有其他解决办法，可以评论提一下)
注：记得添加 -webkit-overflow-scrolling: touch; 否则IOS端不实现惯性滚动
增加通用性
当前设计下，触发派发事件的滚动位置、防抖的间隔、refs的值都是固定的。
但对于不同列表，可能需要提早做一些预加载数据、操作一些滚动组件的DOM等。
因此这些常用的参数，应该通过 props 对外暴露出来，让父组件传入。
如果定义了一个是Object类型的props，可能会出现某些字段不传的情况。
这时，组件里利用 三元表达式 ，Object.key ？ Object.key : defaultValue ，可使得组件有良好的默认表现。
效果如下：
demo地址：https://github.com/yejiayuan163/simpleScroll
滚动组件代码见文末
总结
写完一个滚动组件的开发流程，现在可以总结一下开发一个vue公共组件的原则
- 只关注公共组件自身的功能。 公共组件只关注自己的状态，不关心页面数据逻辑。
- 设计好与父组件的通信。 父组件通过props控制公共组件的表现。通过emit的事件，监听到公共组件状态。通过refs调用到公共组件的方法。当然用vuex+computed属性监听也是可以的。
- 有良好的默认表现 使用者既可定制组件的表现，也可以简单地使用默认配置。
- 记得写使用文档。
谢谢观看！
附 代码实现
<!--调用时，flbScroll的父元素需要固定高度，flbScroll包裹的元素（需要被监听的元素），高度不可固定，需要由内部元素撑开-->
<!--移动端使用，故未对ie8做兼容处理-->
<template>
<div class="scrollWrapper" :ref="wrapperName">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'y-scroll',
props:{
// 被监听元素距离底部的距离
disFromBottom:{
type: Number,
default: 300
},
// 被监听元素距离顶部的距离
disFromTop:{
type: Number,
default: 300
},
// 给scroll组件外层定义一个ref，用于获取监听滚动
wrapperName:{
type: String,
default: '1'
},
//触发判断的时间间隔
interval: {
type: Number,
default: 300
},
},
data() {
return {
lastTime: 0,
timer:''
}
},
mounted() {
// 监听滚动事件
this.$nextTick(()=> {
this.$refs[this.wrapperName].addEventListener('scroll', this.listenPosition, true);
})
},
methods:{
listenPosition(){
if(this.lastTime + this.interval < new Date().getTime()){
this.lastTime = new Date().getTime()
const scrollTop = this.$refs[this.wrapperName].scrollTop//卷去的高度
const scrollHeight = this.$refs[this.wrapperName].scrollHeight//正文全文高
const height = this.$refs[this.wrapperName].clientHeight//元素的高度
// console.log('scrollTop:',scrollTop,'scrollHeight:',scrollHeight,'height:',height)
if(scrollHeight <= scrollTop + height + this.disFromBottom){
console.log('到底了！！')
if(this.timer){
clearTimeout(this.timer)
}
this.$emit('onBottom')
} else {
// 解决惯性滚动到底部不触发的问题
this.timer=setTimeout(() => {
const scrollTop = this.$refs[this.wrapperName].scrollTop//卷去的高度
const scrollHeight = this.$refs[this.wrapperName].scrollHeight//正文全文高
const height = this.$refs[this.wrapperName].clientHeight//元素的高度
if(scrollHeight <= scrollTop + height + this.disFromBottom){
this.$emit('onBottom')
}
},1000)
}
}
},
//解除滚动绑定
unbindScroll(){
this.$refs[this.wrapperName].removeEventListener('scroll', this.listenPosition, true);//第三个参数布尔值与绑定时要一致，第二个参数不能用匿名函数
console.log('解绑滚动事件')
}
},
beforeDestroy(){
// 移除监听滚动事件
this.$refs[this.wrapperName].removeEventListener('scroll', this.listenPosition, true);
}
}
</script>
<style scoped>
.scrollWrapper{
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
