只要保證在最外層父頁面中引入了下面文件

import MescrollCompMixin from "mescroll-uni/mixins/mescroll-comp.js";

并在自己定義的組件上加上ref="mescrollItem"，這名稱是固定的，不能改。

子組件名稱可隨意，但ref是要加上的

如果還有子子組件，則繼續(xù)在當(dāng)前子組件加ref="mescrollItem"

image.png

當(dāng)有多個子組件使用mescroll，父頁面中

<template>
    <view>
        <!-- 菜單 -->
        <view class="top-warp">
            <view class="tip">每個菜單列表僅初始化一次,切換菜單緩存數(shù)據(jù)</view>
            <!-- 當(dāng)設(shè)置tab-width,指定每個tab寬度時,則不使用flex布局,改用水平滑動 -->
            <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :tab-width="130"></me-tabs>
        </view>
        
        <!-- 子組件 (i: 每個tab頁的專屬下標(biāo);  index: 當(dāng)前tab的下標(biāo)) -->
        
        <!-- 如果每個子組件布局不一樣, 可拆開寫 (注意ref只能為 "mescrollItem下標(biāo)" 的格式,
             另外 :i="下標(biāo)" :index="tabIndex"也是固定寫法,tabIndex不能寫成別的參數(shù)) : -->
        <!-- <home ref="mescrollItem0" :i="0" :index="tabIndex"></home>
        <shopcart ref="mescrollItem1" :i="1" :index="tabIndex"></shopcart>
        <user ref="mescrollItem2" :i="2" :index="tabIndex"></user> -->
        
        <mescroll-item ref="mescrollItem0" :i="0" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem1" :i="1" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem2" :i="2" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem3" :i="3" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem4" :i="4" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem5" :i="5" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem6" :i="6" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem7" :i="7" :index="tabIndex" :tabs="tabs"></mescroll-item>
        <mescroll-item ref="mescrollItem8" :i="8" :index="tabIndex" :tabs="tabs"></mescroll-item>
        
        
        <!-- 如果每個子組件布局一樣, 則可使用v-for (注意v-for的ref="mescrollItem"必須是固定值; 另外支付寶小程序不支持此v-for的寫法)-->
        <!-- <mescroll-item ref="mescrollItem" v-for="(tab,i) in tabs" :key="i" :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item> -->
    </view>
</template>

<script>
    import MescrollItem from "./mescroll-more-item.vue";
    import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
    
    export default {
        mixins: [MescrollMoreMixin], // 多個mescroll-body寫在子組件時, 則使用mescroll-more.js補(bǔ)充子組件的頁面生命周期
        components: {
            MescrollItem
        },
        data() {
            return {
                tabs: [{name:'全部'}, {name:'奶粉'}, {name:'面膜'}, {name:'圖書'}, {name:'果汁'}, {name:'奶瓶'}, {name:'美素'}, {name:'花王'}, {name:'韓蜜'}],
                tabIndex: 0 // 當(dāng)前tab下標(biāo),必須與mescroll-more.js對應(yīng),所以tabIndex是固定變量,不可以改為其他的名字
            }
        },
        onShow() {
            // 返回刷新: https://www.mescroll.com/uni.html#note 第二點(diǎn)
            // if(this.canReset){
            //  let curMescroll = this.getMescroll(this.tabIndex)
            //  curMescroll && curMescroll.resetUpScroll()
            // }
            // this.canReset = true
        }
    }
</script>

子組件中

<template>
    <!-- 不能用v-if (i: 每個tab頁的專屬下標(biāo);  index: 當(dāng)前tab的下標(biāo); 申明在 MescrollMoreItemMixin )-->
    <view v-show="i === index">
        <!-- top="120"下拉布局往下偏移,防止被懸浮菜單遮住 -->
        <!-- ref動態(tài)生成: 字節(jié)跳動小程序編輯器不支持一個頁面存在相同的ref (如不考慮字節(jié)跳動小程序可固定值為 ref="mescrollRef") -->
        <mescroll-body :ref="'mescrollRef'+i" @init="mescrollInit" top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
            <!-- 數(shù)據(jù)列表 -->
            <good-list :list="goods"></good-list>
        </mescroll-body>
    </view>
</template>

<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
    import {apiSearch} from "@/api/mock.js"
    
    export default {
        mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此處還需使用MescrollMoreItemMixin (必須寫在MescrollMixin后面)
        props:{
            i: Number, // 每個tab頁的專屬下標(biāo) (除了支付寶小程序必須在這里定義, 其他平臺都可不用寫, 因?yàn)橐言贛escrollMoreItemMixin定義)
            index: { // 當(dāng)前tab的下標(biāo) (除了支付寶小程序必須在這里定義, 其他平臺都可不用寫, 因?yàn)橐言贛escrollMoreItemMixin定義)
                type: Number,
                default(){
                    return 0
                }
            },
            tabs: { // 為了請求數(shù)據(jù),演示用,可根據(jù)自己的項(xiàng)目判斷是否要傳
                type: Array,
                default(){
                    return []
                }
            }
        },
        data() {
            return {
                downOption:{
                    auto:false // 不自動加載 (mixin已處理第一個tab觸發(fā)downCallback)
                },
                upOption:{
                    auto:false, // 不自動加載
                    // page: {
                    //  num: 0, // 當(dāng)前頁碼,默認(rèn)0,回調(diào)之前會加1,即callback(page)會從1開始
                    //  size: 10 // 每頁數(shù)據(jù)的數(shù)量
                    // },
                    noMoreSize: 4, //如果列表已無數(shù)據(jù),可設(shè)置列表的總數(shù)量要大于半頁才顯示無更多數(shù)據(jù);避免列表數(shù)據(jù)過少(比如只有一條數(shù)據(jù)),顯示無更多數(shù)據(jù)會不好看; 默認(rèn)5
                    empty:{
                        tip: '~ 空空如也 ~', // 提示
                        btnText: '去看看'
                    }
                },
                goods: [] //列表數(shù)據(jù)
            }
        },
        methods: {
            /*上拉加載的回調(diào): 其中page.num:當(dāng)前頁 從1開始, page.size:每頁數(shù)據(jù)條數(shù),默認(rèn)10 */
            upCallback(page) {
                // this.i: 每個tab頁的專屬下標(biāo)
                // this.index: 當(dāng)前tab的下標(biāo)
                let word = this.tabs[this.i].name
                apiSearch(page.num, page.size, word).then(curPageData=>{
                    //聯(lián)網(wǎng)成功的回調(diào),隱藏下拉刷新和上拉加載的狀態(tài);
                    this.mescroll.endSuccess(curPageData.length);
                    //設(shè)置列表數(shù)據(jù)
                    if(page.num == 1) this.goods = []; //如果是第一頁需手動制空列表
                    this.goods=this.goods.concat(curPageData); //追加新數(shù)據(jù)
                }).catch(()=>{
                    //聯(lián)網(wǎng)失敗, 結(jié)束加載
                    this.mescroll.endErr();
                })
            },
            //點(diǎn)擊空布局按鈕的回調(diào)
            emptyClick(){
                uni.showToast({
                    title:'點(diǎn)擊了按鈕,具體邏輯自行實(shí)現(xiàn)'
                })
            }
        }
    }
</script>