yd-tab里面使用下拉刷新+滚动加载方法
git0x4c opened this issue · 0 comments
git0x4c commented
问题描述
【这不是提bug】
tab里面使用下拉刷新+滚动加载在作者的案例里得不到很好的解决(也许是我的使用方法不对),于是我利用原生js监听滚动条实现滚动加载效果,希望能给需要的人提供一种方案
产生环境
- **使用版本:1.2.6
- **引入方式:NPM
- **演示地址:-
代码区域
<yd-tab v-model="tab_active" active-color="#3DABF3" :callback="changeTab">
<yd-tab-panel label="测试">
<div class="list">
<yd-pullrefresh :callback="getList" ref="pullrefresh">
<div class="item">your dom</item>
</yd-pullrefresh>
</div>
</yd-tab-panel>
</yd-tab>
// methods:
onScroll () {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滚动条到底部的条件
// console.log(scrollTop, windowHeight, scrollHeight)
if(scrollTop + windowHeight == scrollHeight){
//写后台加载数据的函数
}
},
removeScroll() {
window.removeEventListener('scroll', this.onScroll, false);// 去除监听
}
// mounted
this.$nextTick(function () {
window.addEventListener('scroll', this.onScroll, false)//监听页面滚动事件
})
// 销毁滚动监听 与data同级
beforeDestroy(){
// console.log('beforeDestroy')
this.removeScroll()
},
destroyed() {
// console.log('destroyed')
this.removeScroll()
}