57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
|
/**
|
|||
|
|
* mescroll-body写在子组件时,需通过mescroll的mixins补充子组件缺少的生命周期:
|
|||
|
|
* 当一个页面只有一个mescroll-body写在子组件时, 则使用mescroll-comp.js (参考 mescroll-comp 案例)
|
|||
|
|
* 当一个页面有多个mescroll-body写在子组件时, 则使用mescroll-more.js (参考 mescroll-more 案例)
|
|||
|
|
*/
|
|||
|
|
const MescrollMoreMixin = {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tabIndex: 0 // 当前tab下标
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
let mescroll = this.getMescroll(this.tabIndex);
|
|||
|
|
mescroll && mescroll.onPageScroll(e);
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
let mescroll = this.getMescroll(this.tabIndex);
|
|||
|
|
mescroll && mescroll.onReachBottom();
|
|||
|
|
},
|
|||
|
|
// 当down的native: true时, 还需传递此方法进到子组件
|
|||
|
|
onPullDownRefresh(){
|
|||
|
|
let mescroll = this.getMescroll(this.tabIndex);
|
|||
|
|
mescroll && mescroll.onPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 根据下标获取对应子组件的mescroll
|
|||
|
|
getMescroll(i){
|
|||
|
|
if(!this.mescrollItems) this.mescrollItems = [];
|
|||
|
|
if(!this.mescrollItems[i]) {
|
|||
|
|
// v-for中的refs
|
|||
|
|
let vForItem = this.$refs["mescrollItem"];
|
|||
|
|
if(vForItem){
|
|||
|
|
this.mescrollItems[i] = vForItem[i]
|
|||
|
|
}else{
|
|||
|
|
// 普通的refs,不可重复
|
|||
|
|
this.mescrollItems[i] = this.$refs["mescrollItem"+i];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let item = this.mescrollItems[i]
|
|||
|
|
return item ? item.mescroll : null
|
|||
|
|
},
|
|||
|
|
// 切换tab,恢复滚动条位置
|
|||
|
|
tabChange(i){
|
|||
|
|
let mescroll = this.getMescroll(i);
|
|||
|
|
if(mescroll){
|
|||
|
|
// 延时(比$nextTick靠谱一些),确保元素已渲染
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
mescroll.scrollTo(mescroll.getScrollTop(),0)
|
|||
|
|
},30)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default MescrollMoreMixin;
|