小程序仿微信朋友圈效果
废话不多说，直接上代码。
HTML pages/index/discor.wxml```html
```
pages/index/discor.wxss```css/* pages/index/discor.wxss 页面样式*/
.sectionList {
padding-top:110px;
}
.no-data-icon {
width:100px;
height:100px;
margin-bottom:20px;
}
.no-data-text {
font-size:24px;
color: 666;
}
.sectionItem {
display: flex;
align-items: center;
padding:20px;
border-bottom:1px solid ccc;
}
.avatar {
width:50px;
height:50px;
border-radius:50%;
margin-right:10px;
}
.nickname {
font-size:24px;
color: 333;
}
.content {
flex:1;
padding:020px;
overflow: hidden;
text-overflow: ellipsis;
}
.time {
font-size:18px;
color: 999;
}
.loadMore {
width:100%;
height:80px;
background-color: f7f7f7;
border: none;
padding:0;
box-sizing: border-box;
}
```
pages/index/discor.js```javascript//// pages/index/discor.js//
Page({
data: {
list: []
},
// loadMore() {
// wx.showLoading({
title: '加载中...'
});
// setTimeout(() => {
wx.hideLoading();
// const newList = this.data.list.concat([
{
avatar: '/images/avatar1.png',
nickname: '小明',
content: '今天天气真好!',
time: '2022-01-0112:00'
},
{
avatar: '/images/avatar2.png',
nickname: '小红',
content: '我也觉得很好!',
time: '2022-01-0213:00'
}
]);
// this.setData({
list: newList });
},2000);
},
// onShow() {
wx.setNavigationBarTitle({
title: '朋友圈'
});
}
});
```
小程序结构小程序的结构如下：
* `pages/index/discor.wxml`：列表页面的 HTML 模板* `pages/index/discor.wxss`：列表页面的 CSS 样式* `pages/index/discor.js`：列表页面的 JavaScript代码 小程序功能小程序具有以下功能：
* 列表显示：展示一组数据项* 加载更多：加载更多数据项* 无数据提示：当列表为空时显示提示信息 小程序样式小程序使用了以下样式：
* `sectionList`：列表容器的 CSS 类* `no-data-icon`：无数据提示图标的 CSS 类* `nickname`：昵称的 CSS 类* `content`：内容的 CSS 类* `time`：时间的 CSS 类 小程序事件小程序具有以下事件：
* `loadMore`：加载更多数据项时触发* `onShow`：页面显示时触发以上就是小程序仿微信朋友圈效果的详细描述。
