类星体滚动工具根本不起作用一切都在文档中进行了设置,但仍然像砖头一样还是应该只使用普通的JS?

问题描述

    <template>
      <q-page>
          <q-scroll-observer @scroll="onScroll"/>

//Button on click scroll to the last block
          <q-btn @click="scrolltoElement($refs.contact.$el)" style="z-index: 1000">Btn</q-btn>


//Empty blocks with height and width,just to test scroll
          <the-greeting refs="greet"
                        class="scroll bg-dark"
                        style="height: calc(100vh - 100px);
                     position: relative;"></the-greeting>
      <my-interests ref="interests"
                    class="scroll interests bg-red"
                    style="height: 700px"></my-interests>
      <my-projects ref="projects"
                    class="scroll bg-blue-3"
                    style="height: 500px"></my-projects>
      <contact-me ref="contact"
                   class="scroll bg-blue-6"
                   style="height: 1000px"></contact-me>
  </q-page>
</template>

<script>
import TheGreeting from 'components/TheGreeting/TheGreeting.vue'
import MyInterests from 'components/MyInterests/MyInterests.vue'
import ContactMe from 'components/ContactMe/ContactMe.vue'
import MyProjects from 'components/MyProjects/MyProjects.vue'

import { scroll } from 'quasar'
const { getScrollPosition,setScrollPosition,getScrollTarget } = scroll

export default {


  name: 'PageIndex',components: {
    TheGreeting,MyInterests,ContactMe,MyProjects
  },data(){
    return {
    }
  },methods: {
    scrolltoElement (el) {
      const ele = el;
      const target = getScrollTarget(ele);
      const offset = ele.offsetTop - ele.scrollHeight; // i tried const offset = ele.offsetTop,with or without it
      const duration = 1000
      setScrollPosition(target,offset,duration);
    }
  }
}
</script>

该操作不起作用,我做了documentation所示的所有操作,此外,我找到了论坛并从那里尝试了代码,但仍然没有forum。我想念什么吗?我只想通过按按钮重定向到最后一个块。 这件事行不通,我做了documentation所示的所有操作,此外,我找到了论坛并从那里尝试了代码,但仍然没有forum。我想念什么吗?我只想按一下按钮重定向到最后一个块。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)