Vue.js始めるおれおれアドベントカレンダー2016 – 10日目

作れないことはないんだけど、どうするのが最良なんだろうか。とりあえず作ってみた。

スクロールを拾う

方々でスクロールを監視する必要はないので、偉い部品に任せる。それが main.js なのか App.vue なのか。今回は試しに main.js でやってみた。

  • main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const app = new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App)
  },
  methods: {
    startWatchingScroll: function () {
      document.addEventListener('scroll', () => {
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log(scrollTop)
        store.commit('updateScrollTop', scrollTop)
      })
    }
  }
})
app.startWatchingScroll()

removeEventListener() の事は今回はさておく。

  • App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  …
</style>
 
<template>
  <div class="scrollTop">Top: {{scrollTop}}</div>
</template>
 
<script>
  var store = require('./store.js')
 
  module.exports = {
    data: function () {
      return store.state
    }
  }
</script>

もらって表示するだけ。

よくわからないこと

スクロール監視を行うひと

main.js か App.vue か？

App.vue の方が実質的な本体感があるのでこっちらでやるべきなような。あるいは App.vue は各コンポーネントの取りまとめ役だけになってもらって、その外側に触れるのは main.js の方にするか。今回は後者の方が良いかなーと思ったんだけどあまり自信がない。

他の選択肢として、 main.js 内に app の関数ではなくて直接イベント監視する方法もありそう。

1
2
3
4
5
6
7
8
new Vue({
    …
})
 
document.addEventListener('scroll', () => {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    store.commit('updateScrollTop', scrollTop)
})

こっちの方が良いかな。あーなんかこっちの方が良い気がしてきた。いやどうなんだろ。

scrollTop を格納する場所

これはたぶんStoreで良いんだと思う。