实现示意图： 

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. }