小程序实现经典的列表页

结果示例图

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 {
14. width: 100rpx;
15. height: 100rpx;
16. border-radius: 50rpx;
17. margin: 20rpx;
18. }
19.  
20. /*主体*/
21. .content {
22. display: flex;
23. flex-direction: column;
24. width: 76%;
25. padding-left: 20rpx;
26. }
27.  
28. /*昵称与日期*/
29. .top, .bottom {
30. display: flex;
31. flex-direction: row;
32. justify-content: space-between;
33. align-items: center;
34. width: 100%;
35. }
36.  
37. /*昵称*/
38. .nickname {
39. color: #4d4d4d;
40. font-size: 36rpx;
41. }
42.  
43. /*日期*/
44. .datetime {
45. padding: 10rpx;
46. font-size: 26rpx;
47. color: #b2b2b2;
48. }
49.  
50. /*话语*/
51. .sentence {
52. color: #ccc;
53. font-size: 28rpx;
54. margin-top: 6rpx;
55. overflow: hidden;
56. text-overflow: ellipsis;
57. white-space: nowrap;
58. }

技术点

1.flex

电梯直达：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2.字符串截取

在上述css代码中

1. overflow: hidden;
2. text-overflow: ellipsis;
3. white-space: nowrap;

用处是将过多的文本变成...，并且只有一占据一行

3.圆角图标

1. border-radius = width / 2