小程序实现经典的列表页小程序实现经典的列表页
结果示例图
(此图片来源于网络，如有侵权，请联系删除! )
conversation.png
思路
善用flex
对row左右对开
东边上面对开
东北角左右分散对齐
1.
2. class="row" wx:for="{{list}}" wx:key="" bindtap="rowTapped" data-id="
{{item.id}}">
3.
4. src="{{item.head_img_url}}" />
5.
6. class="content">
7. class="top">
8. class="nickname">{{item.nickname}}
9. class="datetime">{{item.datetime}}
10.
11. class="bottom">
12. class="sentence">{{item.last_content}}
13.
14.
15.
wxss
1. /*首页样式*/
2.
3. /*单元行*/
4. .row {
5. display: flex;
6. flex-direction: row;
7. align-items: center;
8. margin: 0 30rpx;
9. border-bottom: 1px solid #e8e8e8;
10. }
11.
12. /*头像*/
13. .row image {
评论0