yshi/fuintUniapp/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;