首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-聊天消息

时间：2016-05-15 02:43:09      阅读：333      评论：0      收藏：0      [点我收藏+]

消息组件为你的App提供了可视评论和消息系统。

消息组件布局

  1. ...???
  2. <div?class="page">
  3. ??<div?class="page-content?messages-content">
  4. ????<div?class="messages">
  5. ??????<!--?时间戳?-->
  6. ??????<div?class="messages-date">Sunday,?Feb?9?<span>12:58</span></div>
  7. ?
  8. ??????<!--?发送的消息?(默认为绿色背景，在右边)?-->
  9. ??????<div?class="message?message-sent">
  10. ????????<!--?Bubble?with?text?-->
  11. ????????<div?class="message-text">Hello</div>
  12. ??????</div>
  13. ?
  14. ??????<!--?另一条发送的消息?-->
  15. ??????<div?class="message?message-sent">
  16. ????????<!--?文本气泡?-->
  17. ????????<div?class="message-text">How?are?you?</div>
  18. ??????</div>
  19. ?
  20. ??????<!--?接收的信息(默认为灰色背景，在左边)?-->
  21. ??????<div?class="message?message-with-avatar?message-received">
  22. ????????<!--?Sender?name?-->
  23. ????????<div?class="message-name">Kate</div>
  24. ?
  25. ????????<!--?文本气泡?-->
  26. ????????<div?class="message-text">I?am?fine,?thanks</div>
  27. ?
  28. ????????<!--?发送者头像?-->
  29. ????????<div?style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)"?class="message-avatar"></div>
  30. ??????</div>
  31. ?
  32. ??????<!--?另一个时间戳?-->
  33. ??????<div?class="messages-date">Sunday,?Feb?3?<span>11:58</span></div>
  34. ?
  35. ??????<!--?Sent?message?with?image?-->
  36. ??????<div?class="message?message-pic?message-sent">
  37. ????????<!--?Bubble?with?image?-->
  38. ????????<div?class="message-text"><img?src="http://lorempixel.com/300/300/"></div>
  39. ????????<!--?Message?label?-->
  40. ????????<div?class="message-label">Delivered?2?days?ago</div>
  41. ??????</div>
  42. ????</div>
  43. ??</div>
  44. </div>????????
  45. ...
复制

消息组件的页面布局:

  • "messages-content"?- 消息容器，应该加到"page-content"类上

  • "messages"?- 消息气泡的容器，必需

  • "messages-date"?- 单个时间戳容器，包含会话日期和时间（在<span>标签中）

  • "message"?- 单条消息

单条消息的内部结构:

  • "message-name"?- 发送者名称

  • "message-text"?- 文本气泡

  • "message-avatar"?- 发送者头像

  • "message-label"?- 气泡下的文本标签

单条消息容器的一些附加class

  • "message-sent"?- 标识一条被用户发送过的消息，它会位于容器的右侧并且拥有绿色的背景

  • "message-received"?- 标识一条被用户接收的消息，它会位于容器的左侧并且拥有灰色的背景

  • "message-pic"?- 为单条带<img>的消息添加类，除了image，该条消息不可以包括其他元素

  • "message-with-avatar"?- 包含头像

  • "message-with-tail"?- 包含一个小尾巴

单条消息的一个附加的class

  • "message-hide-name"?- 隐藏名字

  • "message-hide-avatar"?- 隐藏头像

  • "message-hide-label"?- 隐藏消息标签

  • "message-last"?- 如果这是一个发送者连续会话的最后一条，则带有一个小尾巴并且有更大的底部留白

  • "message-first"?- 如果这是一个发送者会话的第一条，则带有发送者的名称

In such default layout - new messages will appear on bottom of the page. If you need to have new messages on top of the page you need to use?newMessagesFirst:true?parameter when initializing Messages

Messages Auto Layout

消息自动布局

Framework7 may add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically. For this case we need to use?autoLayout:true?parameter when initializing Messages

  1. ...???
  2. ??????<div?class="messages-date">Sunday,?Feb?9?<span>12:58</span></div>
  3. ?
  4. ??????<div?class="message?message-sent">
  5. ????????<div?class="message-text">Hello</div>
  6. ??????</div>
  7. ?
  8. ??????<div?class="message?message-sent">
  9. ????????<div?class="message-text">How?are?you?</div>
  10. ??????</div>
  11. ?
  12. ??????<div?class="message?message-received">
  13. ????????<div?class="message-name">Kate</div>
  14. ????????<div?class="message-text">I?am?fine,?thanks</div>
  15. ????????<div?style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)"?class="message-avatar"></div>
  16. ??????</div>
  17. ?
  18. ??????<div?class="messages-date">Sunday,?Feb?3?<span>11:58</span></div>
  19. ?
  20. ??????<div?class="message?message-sent">
  21. ????????<div?class="message-text"><img?src="http://lorempixel.com/300/300/"></div>
  22. ????????<div?class="message-label">Delivered?2?days?ago</div>
  23. ??????</div>
  24. ...
复制

That is all, Framework7 will add all required classes to these messages. You just need to keep "message-sent", "message-received" classes

Initialize Messages with JavaScript

Now, when we have Messages‘ HTML, we need to initialize it. We need to use related App‘s method:

myApp.messages(messagesContainer, parameters) - initialize Messages with options

  • messagesContainer - HTMLElement or string (with CSS Selector) of Messages container HTML element. Required.
  • parameters - object - object with Messages parameters. Optional.
  • Method returns initialized Messages instance

For example:

  1. var?myMessages?=?app.messages(‘.messages‘,?{
  2. ????autoLayout:?true
  3. });
复制
Note that Messages container should be in DOM on a moment of initialization. So if you use it not on home page, you need to initialize it within?pageInit?event or callback

Messages Parameters

Let‘s look on list of all available parameters:

Parameter Type Default Description
autoLayout boolean true Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically
newMessagesFirst boolean false Enable if you want to use new messages on top, instead of having them on bottom
messages array ? Array with initial messages. Each message in array should be presented as object with message parameters
messageTemplate string * Look bellow Single message Template7 template

Message Template

You can modify message template by passing your custom Template7-formatted template. By default it is:

  1. {{#if?day}}
  2. <div?class="messages-date">{{day}}?{{#if?time}},?<span>{{time}}</span>{{/if}}</div>
  3. {{/if}}
  4. <div?class="message?message-{{type}}?{{#if?hasImage}}message-pic{{/if}}?{{#if?avatar}}message-with-avatar{{/if}}?message-appear-
  5. ????{{#if?name}}<div?class="message-name">{{name}}</div>{{/if}}
  6. ????<div?class="message-text">{{text}}</div>
  7. ????{{#if?avatar}}<div?class="message-avatar"?style="background-image:url({{avatar}})"></div>{{/if}}
  8. ????{{#if?label}}<div?class="message-label">{{label}}</div>{{/if}}
  9. </div>
复制

Messages Methods & Properties

After we initialize Messages we have its initialized instance in variable (like?myMessages?variable in example above) with helpful methods and properties:

PropertiesMethods
myMessages.params Object with passed initialization parameters
myMessages.container Dom7 element with messagebar container HTML element.
myMessages.addMessage(messageParameters, method, animate);

Add new message to the end or to the beginning depending on?methodparameter

  • messageParameters - object parameters of message to add. Required.
  • method - string - (‘append‘ or ‘prepend‘) dictates to add new message in the end or in the beginning of messages container. Optional, if not specified, then it will add message depending on?newMessagesFirstparameter
  • animate - boolean - (by default?true) You may pass here?false?and message will be added immediately without any transiton and scrolling animation. Optional.
  • Method returns HTMLElement of added messsage
myMessages.appendMessage(messageParameters, animate); Add new message to the end (to the bottom)
myMessages.prependMessage(messageParameters, animate); Add new message to the beginning (to the top)
myMessages.addMessages(messages, method, animate); Add multiple messages per once.
  • messages - array with messages to add. Each message in array should be presented as object with message parameters Required.
  • Method returns array of HTMLElements with added messsages
myMessages.removeMessage(message); Remove message
  • message - HTMLElement or string (with CSS Selector) of message element to remove. Required
  • Method returns?true?if specified message was removed
myMessages.removeMessages(messages); Remove multiple messages
  • messages - array (with HTMLElements) or string (with CSS Selector) of messages to remove. Required
  • Method returns?true?if specified messages was removed
myMessages.scrollMessages(); Scroll messages to top/bottom depending on newMessagesFirst parameter
myMessages.layout(); Apply messages auto layout
myMessages.clean(); Clean/remove all the messages
myMessages.destroy(); Destroy messages instance

Single Message Parameters

Let‘s look on single message parameters object that we should use to addMessage, appendMessage and prependMessage methods:

参数 类型 默认 说明
text string ? 消息文本，也可以使用HTML字符串，如果你想要添加图片消息，则应该传递<img src="...">。必选
name string ? 发送者名称。可选
avatar string ? 发送者头像url。可选
type string ‘sent‘ 消息类型，‘sent‘或‘received‘。可选
label string ? Message label.?Optional
day string ? 日期，例如 - ‘Today‘, ‘Monday‘, ‘Yesterday‘, ‘Fri‘, ‘22.05.2014‘。可选
time string ? Time string, for example - ‘22:45‘, ‘10:30 AM‘.?Optional

Initialize Messages with HTML

If you don‘t need to use Messages methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "messages-init" class to?.messages. In this case we may pass required parameters using?data-?attributes.

  1. ...???
  2. ??<div?class="page-content?messages-content">
  3. ????<!--?Additional?"messages-init"?class-->
  4. ????<div?class="messages?messages-init"?data-auto-layout="true"?data-new-messages-first="false">
  5. ??????<div?class="messages-date">Sunday,?Feb?9?<span>12:58</span></div>
  6. ?
  7. ??????<div?class="message?message-sent">
  8. ????????<div?class="message-text">Hello</div>
  9. ??????</div>
  10. ?
  11. ??????...
  12. ?
  13. ????</div>
  14. ??</div>
  15. ...
复制

Parameters that used in camelCase, for example?autoLayout, in data- attributes should be used as hypens-case as?data-auto-layout

Access to Messages‘s Instance

If you initialize Messages using HTML it is still possible to access to Messages‘s instance. It is "f7Messages" property of messages‘s container HTML element:

  1. var?myMessages?=?$$(‘.messages‘)[0].f7Messages;
  2. ?
  3. //?Now?you?can?use?it
  4. myMessages.layout();
复制

Example

  1. <div?class="page?toolbar-fixed">
  2. ??<div?class="page-content?messages-content">
  3. ????<div?class="messages">
  4. ??????<div?class="messages-date">Sunday,?Feb?9?<span>12:58</span></div>
  5. ??????<div?class="message?message-sent">
  6. ????????<div?class="message-text">Hello</div>
  7. ??????</div>
  8. ??????<div?class="message?message-sent">
  9. ????????<div?class="message-text">How?are?you?</div>
  10. ??????</div>
  11. ??????<div?class="message?message-received">
  12. ????????<div?class="message-name">Kate</div>
  13. ????????<div?class="message-text">I?am?fine,?thanks</div>
  14. ????????<div?style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)"?class="message-avatar"></div>
  15. ??????</div>
  16. ??????<div?class="messages-date">Sunday,?Feb?3?<span>11:58</span></div>
  17. ??????<div?class="message?message-sent">
  18. ????????<div?class="message-text">Nice?photo?</div>
  19. ??????</div>
  20. ??????<div?class="message?message-sent?message-pic">
  21. ????????<div?class="message-text"><img?src="http://lorempixel.com/300/300/"></div>
  22. ????????<div?class="message-label">Delivered</div>
  23. ??????</div>
  24. ??????<div?class="message?message-received">
  25. ????????<div?class="message-name">Kate</div>
  26. ????????<div?class="message-text">Wow,?awesome!</div>
  27. ????????<div?style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)"?class="message-avatar"></div>
  28. ??????</div>
  29. ????</div>
  30. ??</div>
  31. </div>
复制

??实例预览

  1. var?myApp?=?new?Framework7();
  2. ?
  3. var?$$?=?Dom7;
  4. ?
  5. //?会话flag
  6. var?conversationStarted?=?false;
  7. ?
  8. //?Init?Messages
  9. var?myMessages?=?myApp.messages(‘.messages‘,?{
  10. ??autoLayout:true
  11. });
  12. ?
  13. //?Init?Messagebar
  14. var?myMessagebar?=?myApp.messagebar(‘.messagebar‘);
  15. ?
  16. //?Handle?message
  17. $$(‘.messagebar?.link‘).on(‘click‘,?function?()?{
  18. ??//?Message?text
  19. ??var?messageText?=?myMessagebar.value().trim();
  20. ??//?Exit?if?empy?message
  21. ??if?(messageText.length?===?0)?return;
  22. ?
  23. ??//?Empty?messagebar
  24. ??myMessagebar.clear()
  25. ?
  26. ??//?随机消息类型
  27. ??var?messageType?=?([‘sent‘,?‘received‘])[Math.round(Math.random())];
  28. ?
  29. ??//?接收的消息的头像和名称
  30. ??var?avatar,?name;
  31. ??if(messageType?===?‘received‘)?{
  32. ????avatar?=?‘http://lorempixel.com/output/people-q-c-100-100-9.jpg‘;
  33. ????name?=?‘Kate‘;
  34. ??}
  35. ??//?Add?message
  36. ??myMessages.addMessage({
  37. ????//?Message?text
  38. ????text:?messageText,
  39. ????//?随机消息类型
  40. ????type:?messageType,
  41. ????//?头像和名称
  42. ????avatar:?avatar,
  43. ????name:?name,
  44. ????//?日期
  45. ????day:?!conversationStarted???‘Today‘?:?false,
  46. ????time:?!conversationStarted???(new?Date()).getHours()?+?‘:‘?+?(new?Date()).getMinutes()?:?false
  47. ??})
  48. ?
  49. ??//?更新会话flag
  50. ??conversationStarted?=?true;
  51. });
复制

?

移动端安卓和IOS开发框架Framework7教程-聊天消息

原文：http://zaixianshouce.iteye.com/blog/2297895
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！