mui开发的聊天app完整示例

MUI是一款基于HTML5和CSS3的框架，可以用于开发移动端应用。在这篇文章中，我们将介绍使用MUI开发聊天App的完整示例。

首先，我们需要下载MUI框架，并创建一个基本的HTML文件，引入MUI的CSS和JS文件。然后，我们需要在HTML文件中添加一个聊天窗口的容器，如下所示：

```

```

接下来，我们需要使用MUI的JS代码来初始化聊天窗口，并添加一些聊天记录。初始化代码如下：

```

mui.init({

pullRefresh: {

container: '#chat',

down: {

callback: function () {

// 下拉刷新操作

}

}

}

});

mui('#chat .mui-scroll').scroll({

indicators: false,

deceleration: mui.os.ios ? 0.003 : 0.0009

});

var chatList = document.querySelector('#chat ul');

var chatRecords = [

{type: 'left', content: '你好，这里是小明。'},

{type: 'right', content: '你好，我是小红。'},

{type: 'left', content: '你是哪个城市的？'},

{type: 'right', content: '我是北京的。'},

{type: 'left', content: '真的吗？我也是北京的。'}

];

for (var i = 0; i < chatRecords.length; i++) {

var chatRecord = chatRecords[i];

var li = document.createElement('li');

li.className = 'mui-table-view-cell mui-media';

li.innerHTML = '' + chatRecord.content + '';

if (chatRecord.type === 'left') {

li.classList.add('mui-chat-left');

} else if (chatRecord.type === 'right') {

li.classList.add('mui-chat-right');

}

chatList.appendChild(li);

}

```

上面的代码中，我们使用了MUI的下拉刷新组件和滚动组件，来实现聊天窗口的滚动和下拉刷新操作。同时，我们也添加了一些聊天记录到聊天窗口中。

接下来，我们需要添加一个输入框和发送按钮，来让用户输入消息并发送。HTML代码如下：

```

发送

```

然后，我们需要添加一些JS代码，来处理用户输入消息和发送消息的逻辑。代码如下：

```

var input = document.querySelector('#chat .mui-chat-input input');

var sendBtn = document.querySelector('#chat .mui-chat-input button');

sendBtn.addEventListener('tap', function () {

var content = input.value.trim();

if (content.length > 0) {

var li = document.createElement('li');

li.className = 'mui-table-view-cell mui-media mui-chat-right';

li.innerHTML = '' + content + '';

chatList.appendChild(li);

input.value = '';

chatList.parentNode.scrollTop = chatList.parentNode.scrollHeight - chatList.parentNode.offsetHeight;

}

});

```

上面的代码中，我们使用了MUI的tap事件来监听发送按钮的点击事件。当用户点击发送按钮时，我们获取输入框的内容，如果内容不为空，则创建一个新的聊天记录，并添加到聊天窗口中。同时，我们也将聊天窗口滚动到底部，以便用户可以看到最新的消息。

最后，我们需要添加一些CSS样式，来美化聊天窗口和输入框的样式。CSS代码如下：

```

.mui-chat-left .mui-media-body {

padding: 6px 10px;

border-radius: 10px 10px 10px 0;

background-color: #fff;

box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

}

.mui-chat-right .mui-media-body {

padding: 6px 10px;

border-radius: 10px 10px 0 10px;

background-color: #007aff;

color: #fff;

box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

}

.mui-chat-input {

position: fixed;

bottom: 0;

left: 0;

right: 0;

background-color: #f5f5f5;

padding: 10px;

z-index: 999;

}

.mui-chat-input input {

width: 100%;

border-radius: 20px;

padding: 6px 10px;

border: none;

background-color: #fff;

box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

}

.mui-chat-input button {

float: right;

border-radius: 20px;

padding: 6px 10px;

margin-left: 10px;

border: none;

background-color: #007aff;

color: #fff;

box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

}

```

上面的CSS代码中，我们定义了左侧聊天记录、右侧聊天记录、输入框和发送按钮的样式。

到此为止，我们就完成了使用MUI开发聊天App的完整示例。在实际开发中，我们可以根据需求自定义聊天记录的样式和输入框的样式，以及添加更多的功能，例如表情包、图片上传等等。