huazhiyu/components/mescroll-uni/mixins/mescroll-more.js

/**
 * mescroll-body写在子组件时, 需通过mescroll的mixins补充子组件缺少的生命周期
 */
const MescrollMoreMixin = {
	data() {
		return {
			tabIndex: 0, // 当前tab下标
			mescroll: {
				onPageScroll: e=>{
					this.handlePageScroll(e)
				},
				onReachBottom: ()=>{
					this.handleReachBottom()
				},
				onPullDownRefresh: ()=>{
					this.handlePullDownRefresh()
				}
			}
		}
	},
	// 因为子组件无onPageScroll和onReachBottom的页面生命周期，需在页面传递进到子组件
	onPageScroll(e) {
		this.handlePageScroll(e)
	},
	onReachBottom() {
		this.handleReachBottom()
	},
	// 当down的native: true时, 还需传递此方法进到子组件
	onPullDownRefresh(){
		this.handlePullDownRefresh()
	},
	methods:{
		handlePageScroll(e){
			let mescroll = this.getMescroll(this.tabIndex);
			mescroll && mescroll.onPageScroll(e);
		},
		handleReachBottom(){
			let mescroll = this.getMescroll(this.tabIndex);
			mescroll && mescroll.onReachBottom();
		},
		handlePullDownRefresh(){
			let mescroll = this.getMescroll(this.tabIndex);
			mescroll && mescroll.onPullDownRefresh();
		},
		// 根据下标获取对应子组件的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;