小程序模板网

小程序实现经典的列表页

2018-04-20 战兢兢

结果示例图

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

电梯直达:http://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


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23732.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询