Vue中实现页面上滑加载更多，用@scroll监听滚动事件，解决@scroll无效问题

在处理移动端的业务中，遇到需要页面滑动到底部加载更多数据的需求。下面就是个人实现加载更多功能的具体思路和踩坑详解。
第一步：先给div内容添加滚动事件

<template>
  <div class="content" @scroll="scrollCon">
    <ul>
	<li></li>
	……
	<li></li>
    </ul>
  </div>
<template>

第二步：在js中处理滚动事情

export default {
    name: 'demo',
    data () {
      return {
        msg: '',
      }
    },
    methods: {
      scrollCon(e){
        let conScrollHeight = e.target.scrollHeight   // 可以滚动区域的高度
      	let conClientHeight = e.target.clientHeight   // 区域内容的高度
      	let conScrollTop = e.target.scrollTop		 //  内容滚动了的高度
      	// 内容滚动了的高度 +  区域内容的高度 >= 可以滚动区域的高度 
      	// 则证明滑动到了页面底部，这个时候就去处理加载更多的逻辑
      	console.log(conScrollHeight, conClientHeight, conScrollTop)
      	if (conScrollTop + conClientHeight >= conScrollHeight) {
        	console.log('加载更多')
     	 }
      }
    }
}

第三步：在css中处理div样式，防止@scroll事件不生效
@scroll事件不生效的主要原因是因为没有height,没有内容高度所以滚动事件监听不到。

• 方案一：

.content{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
 }

• 方案2

html,body{
  height:100%
}
.content{
  height: 100%
  overflow-y: scroll
}