コメント欄の表示を改善する

kyutech-programming-club / lt-hub

LT 会管理アプリケーション

https://lt-hub.web.app/

MIT License

6 stars 0 forks source link

コメント欄の表示を改善する #102

Closed oshanQQ closed 3 years ago

oshanQQ commented 3 years ago

最新のコメントを一番下に持ってくる
入力フォームを下に移動させる

oshanQQ commented 3 years ago

Vue.js　v-for　レンダリングの並び順を変える（昇順、降順） https://qiita.com/Takmonkey/items/d06d2893ac4baf805ac1

oshanQQ commented 3 years ago

Scroll to bottom of div with Vue.js https://stackoverflow.com/questions/40730116/scroll-to-bottom-of-div-with-vue-js
nuxtで非同期で取得したデータに合わせてチャットを一番下までスクロールする https://qiita.com/0ba/items/4c4e4d3f8253b1e3ddec

syu-kwsk commented 3 years ago

@o-xian999

Vue.js　v-for　レンダリングの並び順を変える（昇順、降順） https://qiita.com/Takmonkey/items/d06d2893ac4baf805ac1

vueのレンダリングで並び順を変えるんじゃなくてfirestoreからとってくるときの並びを変えた方が無駄な処理が少なそう該当箇所: https://github.com/kyutech-programming-club/lt-hub/blob/master/src/components/CommentBoard.vue#L71

oshanQQ commented 3 years ago

それなら、firebaseをメインに１回実装してみましょうか

syu-kwsk commented 3 years ago

メインかどうかはわからないけど、firestoreから取ってくる並びを作成日の昇順にすれば新しいコメントは下に来ると思うよ
スクロールは貼ってたやつも含めて考える必要があると思う

syu-kwsk commented 3 years ago

スクロールはできそうかも（コミットしてない）

https://user-images.githubusercontent.com/39556764/104952511-febcf780-5a07-11eb-9cd7-b3f8fed0eea8.mp4

動画載せるの使ったことなかったのでやってみた(´・ω・｀)

参考コード

updated() {
  this.scrollToEnd()
},
methods: {
  scrollToEnd() {   
      this.$nextTick(() => {
      const chatLog = this.$refs.target
      if (!chatLog) return
      chatLog.$refs.link.scrollTop = chatLog.$refs.link.scrollHeight
      })
  },
},