滚动事件在framework7中不起作用 - Vue答案

【问题标题】：Scroll event not working in framework7 - Vue滚动事件在framework7中不起作用 - Vue
【发布时间】：2019-04-10 02:31:55
【问题描述】：

我目前正在使用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;
  });

【问题讨论】：

标签： javascript vue.js html-framework-7

【解决方案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'

【讨论】：

【解决方案2】：

此代码从数组中的 f7 组件中检索所有页面

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

然后要使页面可滚动，请选择相应的索引并执行以下操作：

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

对于相同的代码，但以更美观的方式，因为我们不想通过索引指定页面：

为您的f7-page 标签添加一个ID

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

然后在mounted中执行此代码：

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

特别感谢 BiscuitmanZ 发现根本问题的评论

【讨论】：