/** * 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;