Framework7 消息

17 Mar 2025 | 6 分钟阅读

Framework7 消息是应用程序中用于评论和消息传递系统的组件。

消息布局

...   
<div class="page">
  <div class="page-content messages-content">
    <div class="messages">
      <!-- Date stamp -->
      <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
 
      <!-- Sent message (by default - green and on right side) -->
      <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">Hello</div>
      </div>
 
      <!-- Another sent message -->
      <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">How are you?</div>
      </div>
 
      <!-- Received message (by default - grey on left side) -->
      <div class="message message-with-avatar message-received">
        <!-- Sender name -->
        <div class="message-name">Kate</div>
 
        <!-- Bubble with text -->
        <div class="message-text">I am fine, thanks</div>
 
        <!-- Sender avatar -->
        <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
      </div>
 
      <!-- Another date stamp -->
      <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
 
      <!-- Sent message with image -->
      <div class="message message-pic message-sent">
        <!-- Bubble with image -->
        <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
        <!-- Message label -->
        <div class="message-label">Delivered 2 days ago</div>
      </div>
 
      <!-- Sent message with single message date -->
      <div class="message message-sent">
        <!-- Bubble with text -->
        <div class="message-text">
          How are you?
          <div class="message-date">Nov 11, 2016</div>
        </div>
        <!-- Message label -->
        <div class="message-label">Delivered 2 days ago</div>
      </div>
    </div>
  </div>
</div>        
...   

消息页面布局

以下是消息页面布局的类列表

"messages-content": 这是一个必需的附加类，添加到 "page-content" 中，用于消息包装器。
"messages": 这也是消息气泡的必需附加包装器。
"messages-date": 它使用日期戳容器来显示消息发送或接收的日期和时间。
"message": 它用于显示单条消息。

单条消息的内部部分

以下是简单消息内部部分的类

message-name: 用于提供发送者姓名。
message-text: 用于定义带有气泡类型的文本。
message-avatar: 用于指定发送者头像。
message-label: 用于指定气泡下方的文本标签。

单条消息容器的附加类

单条消息容器的附加类列表

索引	Class	描述
1)	message-sent	它指定消息由用户发送，并在右侧显示绿色背景色。
2)	message-received	用于显示单条消息，指示该消息由用户接收，并停留在左侧，带有灰色背景色。
3)	message-pic	这是用于使用单条消息显示图像的附加类。
4)	message-with-avatar	这是用于显示带有头像的单条消息（已接收或已发送）的附加类。
5)	message-with-tail	您可以为单条消息（已接收或已发送）添加气泡尾部。

单条消息的附加可用类

索引	Class	描述
1)	message-hide-name	这是用于隐藏单条消息（已接收或已发送）的消息名称的附加类。
2)	message-hide-avatar	这是用于隐藏单条消息（已接收或已发送）的消息头像的附加类。
3)	message-hide-label	这是用于隐藏单条消息（已接收或已发送）的消息标签的附加类。
4)	message-last	您可以使用此类别来指示当前对话中由一个发送者发出的单条消息（已接收或已发送）的最后一条消息。
5)	message-first	您可以使用此类别来指示当前对话中由一个发送者发出的单条消息（已接收或已发送）的第一条消息。

使用 JavaScript 初始化消息

使用以下方法使用 JavaScript 初始化消息

其中

messagesContainer: 这是一个必需的 HTML 元素或字符串，包含消息容器 HTML 元素。
parameters: 它指定一个包含消息参数的对象。

消息参数

索引	参数	类型	描述
1)	autoLayout	boolean	通过启用它，将附加必需的类添加到每条消息。
2)	newMessagesFirst	boolean	您可以通过启用它在顶部显示消息，而不是在底部显示。
3)	messages	数组	它显示一个消息数组，其中每条消息应表示为具有消息参数的对象。
4)	messageTemplate	string	它显示单条消息模板。

消息方法

以下是消息方法的列表

索引	方法	描述
1)	myMessages.addMessage(messageParameters, method, animate);	根据 method 参数将新消息添加到末尾或开头：messageParameters：要添加的消息的对象参数。必填。method - 字符串：（'append' 或 'prepend'）决定在消息容器的末尾还是开头添加新消息。可选，如果未指定，则将根据 newMessagesFirst 参数添加消息 animate - 布尔值：（默认为 true）您可以在此处传递 false，消息将立即添加，没有任何过渡和滚动动画。可选。方法返回已添加消息的 HTMLElement
2)	myMessages.appendMessage(messageParameters, animate);	将新消息添加到末尾（底部）
3)	myMessages.prependMessage(messageParameters, animate);	将新消息添加到开头（顶部）
4)	myMessages.addMessages(messages, method, animate);	一次添加多条消息。 Messages：要添加的消息数组。数组中的每条消息都应作为具有消息参数的对象呈现必填。该方法返回一个带有已添加消息的 HTMLElements 数组
5)	myMessages.removeMessage(message);	删除消息 message：要删除的消息元素的 HTMLElement 或字符串（带有 CSS 选择器）。必填。如果指定的消息被删除，方法将返回 true
6)	myMessages.removeMessages(messages);	删除多条消息 messages：要删除的消息数组（带有 HTMLElements）或字符串（带有 CSS 选择器）。必填如果指定的消息被删除，方法将返回 true。
7)	myMessages.scrollMessages();	根据 newMessagesFirst 参数将消息滚动到顶部/底部
8)	myMessages.layout();	应用消息自动布局
9)	myMessages.clean();	清理/删除所有消息
10)	myMessages.destroy();	销毁消息实例

示例

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Messages</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed toolbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Messages</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "toolbar messagebar">
                     <div class = "toolbar-inner">
                        <textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
                     </div>
                  </div>
                  
                  <div class="page-content messages-content">
    <div class="messages">
      <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
      <div class="message message-sent">
        <div class="message-text">Hello</div>
      </div>
      <div class="message message-sent">
        <div class="message-text">How are you?</div>
      </div>
      <div class="message message-received">
        <div class="message-name">Kate</div>
        <div class="message-text">I am fine, thanks</div>
        <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
      </div>
      <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
      <div class="message message-sent">
        <div class="message-text">Nice photo?</div>
      </div>
      <div class="message message-sent message-pic">
        <div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
        <div class="message-label">Delivered</div>
      </div>
      <div class="message message-received">
        <div class="message-name">Kate</div>
        <div class="message-text">Wow, awesome!</div>
        <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
      </div>
    </div>
  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7();
         var $$ = Dom7;

         // It indicates conversation flag
         var conversationStarted = false;

         // Here initiliaze the messages
         var myMessages = myApp.messages('.messages', {
            autoLayout:true
         });

         // Initiliaze the messagebar
         var myMessagebar = myApp.messagebar('.messagebar');

         // Displays the text after clicking the button
         $$('.messagebar .link').on('click', function () {
         
            // specifies the message text
            var messageText = myMessagebar.value().trim();
            
            // If there is no message, then exit from there
            if (messageText.length === 0) return;

            // Specifies the empty messagebar
            myMessagebar.clear()

            // Defines the random message type
            var messageType = (['sent', 'received'])[Math.round(Math.random())];

            // Provides the avatar and name for the received message
            var avatar, name;
            
            if(messageType === 'received') {
               name = 'Kate';
            }
            
            // It adds the message
            myMessages.addMessage ({
            
               // It provides the message text
               text: messageText,
            
               // It displays the random message type
               type: messageType,
            
               // Specifies the avatar and name of the sender
               avatar: avatar,
               name: name,
            
               // Displays the day, date and time of the message
               day: !conversationStarted ? 'Today' : false,
               time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
            })

            // Here you can update the conversation flag
            conversationStarted = true;
         });

      </script>
   </body>

</html>

立即测试

下一主题Framework7 消息栏

← 上一主题下一主题 →