在vue中监听页面滚动执行一些操作
mounted(){ window.addEventListener('scroll',this.handleScroll,true) },
methods: {
handleScroll(e){ var scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop; // 执行代码
}, }复制代码
html
<div id="app" >
<div class="min_container" @scroll="scrollEvent" > </div> <div class='go_more' v-if='more_show' @click='GoMore' >加载更多</div> <div class='go_more' v-else>没有更多评价了</div>
</div>复制代码
css
.min_container { padding-top: 1.1rem; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto;}复制代码
js
data
more_show: true, // 标志是否可以加载更多 more_show: true, // 标志是否可以加载更多 loading: false, // 只有在列表数据获取之后才可以设置为ture 在滚动加载更多的时候使用
复制代码
methords
scrollEvent(eve) {
const that = this // console.log( // eve.srcElement.scrollTop, // eve.srcElement.offsetHeight, // eve.srcElement.scrollHeight // ); if ( eve.srcElement.scrollTop + eve.srcElement.offsetHeight > eve.srcElement.scrollHeight - 10 && this.more_show && this.loading ) {
// 执行函数
// 中转参数 } },
复制代码
回调函数
that.loading = true; if (that.evaluation_arr.length == that.page_count) { that.more_show = false; } else { that.more_show = true; }复制代码
所有评论(0)