yshi/fuintUniapp/components/mescroll-uni/mixins/mescroll-more-item.js

/**
 * mescroll-more-item的mixins, 仅在多个 mescroll-body 写在子组件时使用 (参考 mescroll-more 案例)
 */
const MescrollMoreItemMixin = {
    // 支付宝小程序不支持props的mixin,需写在具体的页面中
    // #ifndef MP-ALIPAY || MP-DINGTALK
    props:{
        i: Number, // 每个tab页的专属下标
        index: { // 当前tab的下标
            type: Number,
            default(){
                return 0
            }
        }
    },
    // #endif
    data() {
        return {
            downOption:{
                auto:false // 不自动加载
            },
            upOption:{
                auto:false // 不自动加载
            },
            isInit: false // 当前tab是否已初始化
        }
    },
    watch:{
        // 监听下标的变化
        index(val){
            if (this.i === val && !this.isInit) {
                this.isInit = true; // 标记为true
                this.mescroll && this.mescroll.triggerDownScroll();
            }
        }
    },
    methods: {
        // 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)
        mescrollInitByRef() {
            if(!this.mescroll || !this.mescroll.resetUpScroll){
                // 字节跳动小程序编辑器不支持一个页面存在相同的ref, 多mescroll的ref需动态生成, 格式为'mescrollRef下标'
                let mescrollRef = this.$refs.mescrollRef || this.$refs['mescrollRef'+this.i];
                if(mescrollRef) this.mescroll = mescrollRef.mescroll
            }
        },
        // mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
            this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序
            // 自动加载当前tab的数据
            if(this.i === this.index){
                this.isInit = true; // 标记为true
                this.mescroll.triggerDownScroll();
            }
        },
    }
}

export default MescrollMoreItemMixin;