Question

我的vue应用程序中具有聊天功能。该消息按以下内容加载到列表中。

        <div class="chat">
          <ul v-chat-scroll>
              <li 
              v-for="message in messages" 
              :key="message.id"
              :class="message.from == 'a' ?  'message-card-left' : 'message-card-right'"
              >
              <Card class="message-card">
                  <template slot="content">
                  {{message.message}}
                  </template>
                  <template class="message-time" slot="footer">
                  {{message.time}}
                  </template>
              </Card>
              </li>
          </ul>
        </div>

messages变量看起来像：

  messages: [
              {
                id: 1,
                from: 'a',
                to: 'b',
                message:'time',
                time: '1:00'
              },
              {
                id: 2,
                from: 'b',
                to: 'a',
                message:'time',
                time: '1:00'
              },
            ]

出于可读性考虑，我删除了其他对象。我希望v-chat-scroll将聊天窗口滚动到最后一条消息。我也在此代码中使用primeVue。任何帮助，将不胜感激。谢谢。

Answer 1

我已经解决了问题。在我的情况下，v-chat-scroll指令应位于ul类的.chat上，这样可以使聊天滚动。因此，以下代码解决了该问题：

<div>
      <ul class="chat" v-chat-scroll>
          <li 
          v-for="message in messages" 
          :key="message.id"
          :class="message.from == 'a' ?  'message-card-left' : 'message-card-right'"
          >
          <Card class="message-card">
              <template slot="content">
              {{message.message}}
              </template>
              <template class="message-time" slot="footer">
              {{message.time}}
              </template>
          </Card>
          </li>
      </ul>
    </div>

vue-chat-scroll不滚动到列表中的最后一条消息

1 个答案: