📌 相关文章
- Framework7消息栏
- Framework7-消息(1)
- Framework7消息(1)
- Framework7-消息栏(1)
- Framework7消息栏(1)
- Framework7-消息栏
- Framework7卡
- Framework7卡(1)
- Framework7-卡(1)
- Framework7-卡
- Framework7安装(1)
- Framework7安装
- Framework7按钮
- Framework7按钮(1)
- Framework7-按钮
- Framework7-标签
- Framework7预加载器(1)
- Framework7-预加载器
- Framework7预加载器
- Framework7-预加载器(1)
- Framework7-搜索栏
- Framework7-搜索栏(1)
- Framework7-表单(1)
- Framework7-表单
- Framework7表单(1)
- Framework7表单
- Framework7内容块(1)
- Framework7内容块
- Framework7-内容块(1)
📜 Framework7消息
📅 最后修改于: 2021-01-02 06:45:08 🧑 作者: Mango
Framework7消息
Framework7消息是在应用程序中用于注释和消息传递系统的组件。
邮件布局
...
...
消息页面布局
以下是消息页面布局的类别列表：
- “ messages-content”：这是添加到“ page-content”中并用于消息包装的必需的附加类。
- “消息”：它也是消息气泡的必需附加包装。
- “ messages-date”：它使用日期戳容器显示发送或接收的消息的日期和时间。
- “消息”：用于显示单个消息。
单消息内部
以下是简单消息内部部分的类：
- message-name：用于提供发件人名称。
- message-text：用于定义气泡类型的文本。
- message-avatar：用于指定发件人头像。
- message-label：用于指定气泡下方的文本标签。
单消息容器的其他类
单个消息容器的其他类的列表：
| Index | Class | Description |
|---|---|---|
| 1) | message-sent | It specifies that message was sent by the user and is displayed with green background color on the right side. |
| 2) | message-received | It is used for displaying the single message indicating that, the message was received by user and stays on the left side with grey background color. |
| 3) | message-pic | It is an additional class for displaying image with a single message. |
| 4) | message-with-avatar | It is an additional class for displaying a single message (received or sent) with avatar. |
| 5) | message-with-tail | You can add a bubble tail for single message (received or sent). |
单个消息的其他可用类
| Index | Class | Description |
|---|---|---|
| 1) | message-hide-name | It is an additional class for hiding message name for a single message (received or sent). |
| 2) | message-hide-avatar | It is an additional class for hiding message avatar for a single message (received or sent). |
| 3) | message-hide-label | It is an additional class for hiding message label for a single message (received or sent). |
| 4) | message-last | You can use this class to indicate the last received or sent message in current conversation by one sender for a single message (received or sent). |
| 5) | message-first | You can use this class to indicate first received or first sent message in current conversation by one sender for a single message (received or sent). |
使用JavaScript初始化消息
以下方法用于使用JavaScript初始化消息：
myApp.messages(messagesContainer, parameters)
这里：
- messagesContainer：这是必需的HTML元素或包含消息容器HTML元素的字符串。
- 参数：它指定带有消息参数的对象。
消息参数
| Index | Parameter | Type | Description |
|---|---|---|---|
| 1) | autoLayout | boolean | It adds additional required classes to each message by enabling it. |
| 2) | newMessagesFirst | boolean | You can display message on top instead of displaying on bottom by enabling it. |
| 3) | messages | array | It displays an array of messages in which each message should be represented as object with message parameters. |
| 4) | messageTemplate | string | It displays the single message template. |
讯息方式
以下是消息方法的列表：
| Index | Method | Description |
|---|---|---|
| 1) | myMessages.addMessage(messageParameters, method, animate); | Add new message to the end or to the beginning depending on method parameter: 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 newMessagesFirst parameter 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 |
| 2) | myMessages.appendMessage(messageParameters, animate); | Add new message to the end (to the bottom) |
| 3) | myMessages.prependMessage(messageParameters, animate); | Add new message to the beginning (to the top) |
| 4) | 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 |
| 5) | 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 |
| 6) | 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. |
| 7) | myMessages.scrollMessages(); | Scroll messages to top/bottom depending on newMessagesFirst parameter |
| 8) | myMessages.layout(); | Apply messages auto layout |
| 9) | myMessages.clean(); | Clean/remove all the messages |
| 10) | myMessages.destroy(); | Destroy messages instance |
例
Messages