VueJS：如何在滚动位置后动态更改CSS类

Question

我正在使用vueJs和bootstrap创建一个webapp。在特定数量的滚动之后，我想要change CSS class一个元素，是否有一些vue方式。

我想要以下内容：

import re
import ast
data = """
<script type="text/javascript">
    window._propertyData =
    { *** a lot of random code and other data ***
    "property": {"street": "21st Street", "apartment": "2101", "available": false}
    *** more data ***
    }
</script>
"""
property = re.search(r'"property": ({.+?})', data)
str_form = property.group(1)
print('str_form: ' + str_form)
dict_form = ast.literal_eval(str_form.replace('false', 'False'))
print('dict_form: ', dict_form)

我找到的一个选项是使用vue-scroll，这似乎很有希望，但是not working。

还有其他原生方式可以实现同样的目标吗？

Answer 1

你可以尝试这样做

const app = new Vue({

  el: '#app',

  data: {
    scrollPosition: null
  },

  methods: {
    updateScroll() {
      this.scrollPosition = window.scrollY
    }
  },

  mounted() {
    window.addEventListener('scroll', this.updateScroll);
  }

})

您还可以在destroy上删除eventListener，如下所示：

destroy() {
  window.removeEventListener('scroll', this.updateScroll)
}