用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

flex实现小程序自适应图文列表

纸飞机 2018-3-8 09:32

分享者:武兵,来自公众号图说前端 需求: 1.左侧头像和右侧按钮区域宽度固定。 2.文字内容区域高度宽度自动。 3.3个区块垂直居中对齐。 4.头像和文字区域加链接。 5.按钮另外加链接。实现示意图: 1.因为头像和文字 ...

分享者:武兵,来自公众号图说前端
需求:
1.左侧头像和右侧按钮区域宽度固定。
2.文字内容区域高度宽度自动。
3.3个区块垂直居中对齐。
4.头像和文字区域加链接。
5.按钮另外加链接。

实现示意图:

1.因为头像和文字区域要加链接,所以装在一个navigator,关注按钮是右侧navigator。
2.左侧的navigator中再分头像和文字区域。

wxml:

  1. class="anglesList">
  2. url="http://xwbline.com/" class="anglesNavigator">
  3. <--图片套个view是为了渐变的边框(其实是背景色渐变,border-radius后border写不上渐变)。-->
  4. class="imgBox">
  5. src=" " mode="aspectFill">
  6. <--images中的mode="aspectFill"让图片保持纵横比缩放,让图片的短边能完全显示出来。确保取到的图片不是正方形时不留空白。-->
  7. class="textBox">
  8. class="name">姓名
  9. class="companyName">公司名职位名
  10. class="num">已有600人关注
  11. url="http://xwbline.com/" class="btnFollowed">关注

wxss:
只写主要的样式。

  1. .anglesList{
  2. display:flex;//使用flex布局
  3. align-items:center;//子元素在垂直方向居中对齐
  4. padding:25rpx 25rpx 25rpx 0;//留出边距
  5. margin-left:25rpx;//其实可以写在内边距中
  6. border-bottom:1px solid #f1f1f1;
  7. }
  8. //anglesList的子元素指两个navigator
  9. //头像和内容区域
  10. .anglesList .anglesNavigator{
  11. display:flex;//头像和内容区域启动flex布局
  12. align-items:center;//子元素在垂直方向居中对齐
  13. flex-grow:1;//放大,占据剩余的空间
  14. }
  15. //头像父层
  16. .anglesList .imgBox{
  17. flex:0 0 110rpx;//flex 是flex-grow, flex-shrink 和 flex-basis的简写。flex:0 0 110rpx的意思是不放大 不缩小 固定宽度是110rpx
  18. width:110rpx;
  19. height:110rpx;
  20. border-radius:50%;
  21. padding:5rpx;
  22. margin-right:20rpx;
  23. background:linear-gradient(#fff,#6a6969);
  24. }
  25. //头像
  26. .anglesList .imgBox image{
  27. width:110rpx;
  28. height:110rpx;
  29. border-radius:50%;
  30. }
  31. //文字区域
  32. .anglesList .textBox{
  33. flex-grow:1;//放大,占据剩余的空间。
  34. }
  35. //文本限制宽度,超出隐藏
  36. .anglesList text{
  37. display:block;
  38. max-width:12em;
  39. overflow:hidden;
  40. white-space:nowrap;
  41. text-overflow:ellipsis;
  42. }
  43. //按钮
  44. .btnFollow{
  45. flex-basis:140rpx; //指定宽度,也可以写width
  46. height:46rpx;
  47. border:1px solid #007ae8;
  48. border-radius:24rpx;
  49. background:#fff;
  50. text-align:center;
  51. font-size:28rpx;
  52. line-height:46rpx;
  53. color:#007ae8;
  54. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏