vue2.0滚动加载组件

本文主要是介绍vue2.0滚动加载组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：刚开始用的element-ui的滚动加载组件，个别电脑会在滚动加载没到底就停止了，怀疑是有bug,就自己写了一个

一、直接上代码

<div class="threadListAttach" ref="replyscrollDom"><div class="threadContent" ></div>
</div>//触底加载
flagContent: false,
scrollPosition: 0, // 滚动位置
throttled: false,
pageNum: 1,watch: {// 滚动加载scrollPosition(newPosition) {if (!this.throttled) {this.throttled = true;if (newPosition + this.$refs.replyscrollDom.clientHeight + 50 >this.$refs.replyscrollDom.scrollHeight &&this.flagContent) {this.pageNum++;//重新请求下一列  }setTimeout(() => {this.throttled = false;}, 200);}},
},setTimeout(() => {this.scrollPosition = 0;this.$nextTick(() => {// 监听滚动位置const container = document.querySelector('.threadListAttach');container.addEventListener('scroll', () => {this.scrollPosition = container.scrollTop;});});
}, 300);.threadListAttach {width: 500px;max-height: 400px;overflow: auto;
}

这篇关于vue2.0滚动加载组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---