Ionic 当我更改路线时,IonContent scrollToTop功能不工作

dba5bblo  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(147)

我正在用ionic-vue创建一个移动的应用程序。
当我切换路线时,IonContent scrollToTop功能不起作用。例如:
本地主机:8100-〉本地主机:8100
详情:
在原始页面上,当我单击scrollToTop按钮时,它工作正常。但是,如果我前进或后退某个链接,然后单击scrollToTop按钮,它就不工作了。但是,如果我返回到原始链接,scrollToTop按钮就工作了。
我不明白它为什么会这样。
以下是按钮(ScrollToTopButton.vue)的代码:

<template>
    <div id="myBtn">
        <ion-button @click="scrollToTop">
            <ion-icon :icon="arrowUpCircleOutline" color="success"></ion-icon>
        </ion-button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { IonButton, IonIcon } from '@ionic/vue'
import { arrowUpCircleOutline } from 'ionicons/icons';

export default defineComponent({
    components: {
        IonButton,
        IonIcon,
    },
    setup () {
        
        const scrollToTop = () => {
            let scrollContent = document.querySelector('ion-content')!;
            console.log(scrollContent)
            //scrollContent.scrollToTop(500);
            console.log(scrollContent.scrollToTop(600))
        }

        return { arrowUpCircleOutline, scrollToTop };
    }
})
</script>

下面是IonContent的代码(在TabLayout.vue中):

<template>
    <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <slot name="actions-start"></slot>
          <ion-back-button :default-href="pageDefaultBackLink" v-if="pageDefaultBackLink !== ''"></ion-back-button>
        </ion-buttons>
        <ion-title>
          <div class="ion-text-wrap pageTitle">
            {{title}}
          </div>
          </ion-title>
        <ion-buttons slot="end">
            <slot name="actions-end"></slot>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true" class="bindingScrollContent" :scroll-events="true">

        <slot/>

    </ion-content>
  </ion-page>
</template>

这是我在IonContent中使用ScrollToTop按钮的代码(在Surah.vue中):

<template>
    <TabLayout :title="title" pageDefaultBackLink=''>
      ...
        <template v-slot:actions-end>
            <ScrollToTopButton/>
        </template>
      <SurahContainer :surah="cur_surah"/>
    </TabLayout>
</template>

我尝试了很多方法,但是很难调试这个问题,因为来自按钮的数据的控制台日志语句即使在不同的路由上也不会改变。
任何想法或帮助都是很棒的。

p4tfgftt

p4tfgftt1#

添加这两行作为注解以解决问题

const ScrollToBottom = () => {
    let scrollContent = document.querySelector('ion-content');

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    //@ts-ignore
    scrollContent.scrollToTop(400);
};

相关问题