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使用页面/视图，窗口实际上并未滚动。在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'

滚动事件在Framework7中不起作用-Vue

1 个答案: