Страница Vue не прокручивается вниз при загрузке


Страница Vue не прокручивается вниз при загрузке

22.09.2020 01:30:12 Просмотров 37 Источник

мне трудно заставить страницу прокручиваться вниз до последнего сообщения При загрузке. У меня есть та же функция, которая работает, когда человек отправляет новое сообщение, и страница прокручивается вниз прямо до последнего сообщения после отправки. Я попробовал несколько методов, таких как scrollIntoView и даже установил scrollTop на 9999. Однако, когда я консольно регистрирую scrollTop, он по-прежнему указывает, что он равен 0. Функция вызывается в установленный после сообщения загружаются в созданные. Кто-нибудь может мне помочь, почему это не работает? Очень ценю вашу помощь, спасибо.

<v-container>
  <div id="top-nav">
    <v-avatar id="avatar">
      <img src="../../public/img/icons/myavatar.png" alt="avatar">
    </v-avatar>
    <div id="title-grp">
      <h3 id="sofia-title">Sofia</h3>
      <div id="online-grp">
        <span id="online-circle"></span>
        <p id="online-text">Online</p>
      </div>
    </div>
  </div>
  <div id="msg-container">
    <v-row dense>
      <v-col cols="12">
        <v-card
          style="width: fit-content"
          v-for="(message,index) in messages"
          :key="index"
          :style="{'margin-left': message.isRobot ? '' : 'auto'}"
          :color="message.isRobot? '#F5F3FF' :'#C66BCC'" 
          id="convo-space"
        >
          <p id="timestamp" :style="{'color': message.isRobot? '#808080' : '#000000'}">{{message.timestamp}}</p>
          <v-card-text
            :style="{'color': message.isRobot ? 'black' : 'white', 'font-size': '16px'}"
          >
            {{message.text}}
          </v-card-text>

        </v-card>
        <div id="bottom-scroll" ref="last-message"></div>   
      </v-col>
    </v-row>
  </div>    

  <div id="bottom-container">
    <div class="col-text">
      <input type="text" placeholder="Type here" id="text-input" v-model="userMessage">
    </div>
    <div class="col-btn">
      <button @click="sendMessage" id="btn-color-text"> Send </button>
    </div>
  </div>
</v-container>
        

</template>

<script>

  import {config} from "../config.js"
  const token = config.dialogflow.clientBot;

  import { ApiAiClient } from 'api-ai-javascript';
  const client = new ApiAiClient({accessToken: token});

  import { mapGetters } from "vuex";

  import firebase from "firebase";

  export default {
    data: () => ({
      messages: [],
      userMessage: "", 
    }),
    methods: {
      sendMessage(){
        var timestamp = new Date().toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'});
        const usrMessage = {
          text: this.userMessage,
          isRobot: false,
          timestamp: timestamp
        };

        this.messages.push(usrMessage);

        client.textRequest(this.userMessage).then((response) => {
          const robotMessage = {
            text: response.result.fulfillment.speech,
            isRobot: true,
            timestamp: timestamp
          };

          firebase
          .firestore()
          .collection("users")
          .doc(firebase.auth().currentUser.uid)
          .collection("messages")
          .add({
            userMessage: usrMessage.text,
            robotMessage: robotMessage.text,
            timestamp: timestamp 
          });

          const delay = ms => new Promise(res => setTimeout(res,ms));

          const pushMsg = async () => {
            let randNum = Math.floor(Math.random() * 8000);
            await delay(randNum);
            await this.messages.push(robotMessage);
            this.scrollToEnd();
          };

          pushMsg();
          this.scrollToEnd();
        });
          


        this.userMessage = "";
        console.log(firebase.auth().currentUser.uid);
      },
      scrollToEnd(){
        var container = this.$el.querySelector('#msg-container');
        container.scrollTop = container.scrollHeight;
        console.log(container.scrollHeight);
        console.log(container.scrollTop);
      }
    },

    created(){
      var oldMessages = [];

      firebase
      .firestore()
      .collection("users")
      .doc(firebase.auth().currentUser.uid)
      .collection("messages")
      .get()
      .then( (querySnapshot) => {
        querySnapshot.forEach(function(doc){
          var snapMsg = doc.data();
          let robot = {
            text: snapMsg.robotMessage,
            timestamp: snapMsg.timestamp,
            isRobot: true
          }

          let human = {
            text: snapMsg.userMessage,
            timestamp: snapMsg.timestamp,
            isRobot: false
          }
          
          oldMessages.unshift(human, robot);
          });
          this.messages = oldMessages;
          });
    },
    mounted(){
      var bottomDiv = this.$el.querySelector('#bottom-scroll');
      bottomDiv.scrollIntoView();
      console.log(bottomDiv);
      console.log(bottomDiv.scrollIntoView());

      // var bottomDiv = this.$el.querySelector('#msg-container');
      // bottomDiv.scrollTop = 9999;      
      // console.log(bottomDiv.scrollTop);

      navigator.serviceWorker.addEventListener('message', (e) => {
        console.log('Push Notification received');
        console.log(e.data.firebaseMessagingData.notification.body);
        var timestamp = new Date().toLocaleTimeString(undefined, {hour: '2-digit', minute: '2-digit'});
        const robotMessage = {
          text: e.data.firebaseMessagingData.notification.body,
          isRobot: true,
          timestamp: timestamp
        }
        firebase
        .firestore()
        .collection("users")
        .doc(firebase.auth().currentUser.uid)
        .collection("messages")
        .add({
          robotMessage: robotMessage.text,
          timestamp: robotMessage.timestamp
        });

        this.messages.push(robotMessage);
      });
    },
    computed: {
      ...mapGetters({
        user: "user"
      })
    }
  }
</script> ```
У вопроса есть решение - Посмотреть?

Ответы - Страница Vue не прокручивается вниз при загрузке / Vue Page doesn't scroll down upon loading

Является ответом!
Emmanuel Ogoma

22.09.2020 01:48:42

Что происходит, так это то, что вы пытаетесь обновить пользовательский интерфейс, когда данные были обновлены, а DOM не был обновлен. Вызвать scrollToEnd когда/ИП дом был обновлен, используя nextTick, nextTick вю называется, когда дом был обновлен

Например, ваш код

const pushMsg = async () => {
        let randNum = Math.floor(Math.random() * 8000);
        await delay(randNum);
        await this.messages.push(robotMessage);
        this.scrollToEnd();
      };

должно быть

 let self= this;
 const pushMsg = async () => {
        let randNum = Math.floor(Math.random() * 8000);
        await delay(randNum);
        await this.messages.push(robotMessage);
  self.$nextTick(function(){
   this.scrollToEnd();
  })
        
      };
Помочь в развитии проекта:
Закрыть X