滾動事件在 framework7 中不起作用 - Vue

Question

我目前正在使用framework7並且我遇到了這個問題，其中一旦用戶通過滾動特定元素，我需要讓按鈕浮動。

但由於某種原因，我無法使滾動事件起作用。 即使使用了本機事件偵聽器，但仍然沒有運氣。

這是我的代碼。 在我的組件中：

 export default {
    methods: {
    handleScroll(event) {
      alert('should work')
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.handleScroll;
    var element = document.querySelector(".similar-adventures");
    var top = element.offsetTop;
    window.scrollTo(0, top);
  }
}

這是我的本機事件偵聽器代碼：

  window.addEventListener(‘scroll’, function(e){

     // Get the new Value
     newValue = window.pageYOffset;

     //Subtract the two and conclude
     if(oldValue - newValue < 0){
         console.log(“Up”);
     } else if(oldValue - newValue > 0){
         console.log(“Down”);
     }

     // Update the old value
     oldValue = newValue;
  });

Answer 1

我知道這個現在已經過時但我會回答以供將來參考，所以我認為這里的問題是窗口實際上並沒有滾動，因為framework7使用了pages / views。 在vue中渲染到2個div就像這樣..

<f7-page>
  <div slot="fixed">Fixed element</div>
  <p>Page content goes here</p>
</f7-page>

<!-- Renders to: -->

<div class="page">
  <div>Fixed element</div>
  <div class="page-content">
    <p>Page content goes here</p>
  </div>
</div>

我發現你想要將eventListenter置於最佳方式的頁面內容類是Dom7，就像這樣......

 let page = $$('.page-content')

  page.on('scroll', () => {
    console.log(page.scrollTop()) // will show page top position
    page.scrollTop(0) // will scroll to top
  })

//if you have multiple pages

  let page = $$('.page-content')
  let home = $$(page[0])
  let about = $$(page[1])

  page.on('scroll', () => {
     console.log(home.scrollTop()) //home page top position
     console.log(about.scrollTop()) //about page top position
  })

  //more options 

  page.scrollTop(position, duration, callback)
  page.scrollTo(left, top, duration, callback)

只記得import $$ from 'Dom7'

Answer 2

此代碼從數組中的 f7 組件中檢索所有頁面

let pages = document.querySelectorAll('.page-content');

然后要使頁面可滾動，請選擇相應的索引並執行以下操作：

pages[0].addEventListener('scroll', function () { console.log('is scrolling...') } );

對於相同的代碼，但以更漂亮的方式，因為我們不想按索引指定頁面：

將 id 添加到您的f7-page標簽

  <f7-page name="whatever" id='myPage'>

然后在安裝中執行此代碼，例如：

let f7page = document.getElementById('myPage');
let scrollableDiv = f7page.querySelector('.page-content');
scrollableDiv.addEventListener('scroll', function () { console.log('is scrolling...') } );

特別感謝 BiscuitmanZ 對發現潛在問題的評論