写一个微信小程序消息列表
时间: 2024-03-17 21:44:45 浏览: 20
好的,以下是一个微信小程序消息列表的代码示例:
1. 在 `pages` 目录下新建一个名为 `messages` 的目录,并在该目录下新建以下文件:
`messages.js`:
```javascript
Page({
data: {
messages: [
{
avatar: '/images/avatar1.png',
nickname: 'Alice',
timestamp: '2021-03-01 12:00:00',
content: 'Hello, how are you?',
},
{
avatar: '/images/avatar2.png',
nickname: 'Bob',
timestamp: '2021-03-01 12:01:00',
content: 'Hi Alice, I\'m fine, thanks. And you?',
},
{
avatar: '/images/avatar1.png',
nickname: 'Alice',
timestamp: '2021-03-01 12:02:00',
content: 'Not bad, thanks for asking.',
},
// 可以添加更多的消息
],
},
})
```
`messages.wxml`:
```html
<view class="container">
<view class="message" wx:for="{{messages}}" wx:key="{{index}}">
<view class="avatar">
<image src="{{item.avatar}}" />
</view>
<view class="content">
<view class="header">
<text class="nickname">{{item.nickname}}</text>
<text class="timestamp">{{item.timestamp}}</text>
</view>
<view class="body">
<text>{{item.content}}</text>
</view>
</view>
</view>
</view>
```
`messages.wxss`:
```css
.container {
max-width: 600rpx;
margin: 0 auto;
padding: 20rpx;
box-shadow: 0rpx 0rpx 10rpx #ccc;
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 28rpx;
}
.message {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.avatar {
margin-right: 20rpx;
}
.avatar image {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.content {
flex: 1;
}
.header {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.nickname {
font-weight: bold;
margin-right: 10rpx;
}
.timestamp {
color: #999;
}
.body {
margin: 0;
}
```
2. 在 `app.json` 文件中添加以下代码:
```json
{
"pages": [
"pages/index/index",
"pages/messages/messages"
],
"window": {
"navigationBarTitleText": "微信小程序"
}
}
```
3. 在 `app.wxss` 文件中添加以下代码:
```css
/* 全局样式 */
```
4. 在 `images` 目录下添加两张头像图片。
以上代码实现了一个简单的微信小程序消息列表,包括每条消息的头像、昵称、时间戳和内容。你可以根据需要添加更多的样式和交互效果,例如滚动加载、下拉刷新等。
注意,该程序只是一个简单的示例,实际应用中可能需要更复杂的功能和交互方式。