由于mescroll在分頁切換時自動觸發(fā)機制, 會默認(rèn)調(diào)用下拉刷新動畫加載數(shù)據(jù), 如何解決首次下拉刷新動畫?

思路: 通過禁用 mescrollTrigger() 的自動觸發(fā)，然后手動控制數(shù)據(jù)刷新，可以徹底避免首次切換時的下拉刷新的動畫問題。

由于首頁面是默認(rèn)加載數(shù)據(jù)的,看如何處理:

    methods: {
        // 重寫 mescrollTrigger 方法，首頁面默認(rèn)加載數(shù)據(jù)
        mescrollTrigger() {
            // 默認(rèn)頁面，需要立即加載數(shù)據(jù)
            if (this.i === 0 && !this.hasInitialized) {
                // 手動加載數(shù)據(jù)
                this.manualLoadData();
                }
            },

            // 手動加載數(shù)據(jù)
            manualLoadData() {
                console.log("手動加載數(shù)據(jù)");
                this.hasInitialized = true;
                 ....調(diào)用接口
            }                     
        }

其他分頁組件,只需要考慮首次切換時手動加載.

        watch: {
            // 監(jiān)聽index變化，當(dāng)切換到當(dāng)前tab時手動控制數(shù)據(jù)加載
            index(newVal) {
                if (newVal === this.i) {
                    // 如果是首次加載，手動觸發(fā)數(shù)據(jù)加載
                    if (!this.hasInitialized) {
                         // 手動調(diào)用接口
                        this.manualLoadData();
                    }
                }
            },
          
            methods: {
                // 重寫 mescrollTrigger 方法，禁用自動觸發(fā)
                mescrollTrigger() {
                    // 不執(zhí)行任何操作，禁用自動觸發(fā)
                    console.log("mescrollTrigger 被禁用，使用手動控制");
                },

                // 手動加載數(shù)據(jù)
                manualLoadData() {
                    this.hasInitialized = true;
                      ....調(diào)用接口
                  }
            }