實(shí)現(xiàn)示意圖： 

1.因?yàn)轭^像和文字區(qū)域要加鏈接，所以裝在一個(gè)navigator，關(guān)注按鈕是右側(cè)navigator。 
2.左側(cè)的navigator中再分頭像和文字區(qū)域。

wxml：

1. <!--小程序中沒有列表元素，用view-->
2. <view class="anglesList">
3. <navigator url="http://xwbline.com/" class="anglesNavigator">
4. <--圖片套個(gè)view是為了漸變的邊框（其實(shí)是背景色漸變，border-radius后border寫不上漸變）。-->
5. <view class="imgBox">
6. <image src=" " mode="aspectFill"></image>
7. <--images中的mode="aspectFill"讓圖片保持縱橫比縮放，讓圖片的短邊能完全顯示出來。確保取到的圖片不是正方形時(shí)不留空白。-->
8. </view>
9. <view class="textBox">
10. <text class="name">姓名</text>
11. <text class="companyName">公司名職位名</text>
12. <text class="num">已有600人關(guān)注</text>
13. </view>
14. </navigator>
15. <navigator url="http://xwbline.com/" class="btnFollowed">關(guān)注</navigator>
16. </view>

wxss：  只寫主要的樣式。

1. .anglesList{
2. display:flex;//使用flex布局
3. align-items:center;//子元素在垂直方向居中對(duì)齊
4. padding:25rpx 25rpx 25rpx 0;//留出邊距
5. margin-left:25rpx;//其實(shí)可以寫在內(nèi)邊距中
6. border-bottom:1px solid #f1f1f1;
7. }
8. //anglesList的子元素指兩個(gè)navigator
9.  
10. //頭像和內(nèi)容區(qū)域
11. .anglesList .anglesNavigator{
12. display:flex;//頭像和內(nèi)容區(qū)域啟動(dòng)flex布局
13. align-items:center;//子元素在垂直方向居中對(duì)齊
14. flex-grow:1;//放大，占據(jù)剩余的空間
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. //文字區(qū)域
36. .anglesList .textBox{
37. flex-grow:1;//放大，占據(jù)剩余的空間。
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. }