小程序模板网

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

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

实现示意图: 

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

wxml:

 

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

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. //头像和内容区域
  11. .anglesList .anglesNavigator{
  12. display:flex;//头像和内容区域启动flex布局
  13. align-items:center;//子元素在垂直方向居中对齐
  14. flex-grow:1;//放大,占据剩余的空间
  15. }
  16.  
  17. //头像父层
  18. .anglesList .imgBox{
  19. flex:0 0 110rpx;//flex 是flex-grow, flex-shrink 和 flex-basis的简写。flex:0 0 110rpx的意思是不放大 不缩小 固定宽度是110rpx
  20. width:110rpx;
  21. height:110rpx;
  22. border-radius:50%;
  23. padding:5rpx;
  24. margin-right:20rpx;
  25. background:linear-gradient(#fff,#6a6969);
  26. }
  27.  
  28. //头像
  29. .anglesList .imgBox image{
  30. width:110rpx;
  31. height:110rpx;
  32. border-radius:50%;
  33. }
  34.  
  35. //文字区域
  36. .anglesList .textBox{
  37. flex-grow:1;//放大,占据剩余的空间。
  38. }
  39.  
  40. //文本限制宽度,超出隐藏
  41. .anglesList text{
  42. display:block;
  43. max-width:12em;
  44. overflow:hidden;
  45. white-space:nowrap;
  46. text-overflow:ellipsis;
  47. }
  48.  
  49. //按钮
  50. .btnFollow{
  51. flex-basis:140rpx; //指定宽度,也可以写width
  52. height:46rpx;
  53. border:1px solid #007ae8;
  54. border-radius:24rpx;
  55. background:#fff;
  56. text-align:center;
  57. font-size:28rpx;
  58. line-height:46rpx;
  59. color:#007ae8;
  60. }


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