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

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

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

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

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

其他分頁組件,只需要考慮首次切換時(shí)手動(dòng)加載.

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

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