在線客服 
日期：2021-9-11 11:40:34 閱讀：
說到圖片和文字的鏈接就不得不理下思路：首先我想要在小程序內顯示圖片文字信息，且在點擊目標圖片或文字時，可以轉到我希望到達的另一個目標頁面，這就表示我們需要在圖片和文字外圍用navigator將它們包裹住，其次如上述圖片一樣，希望文字位于圖片下方，那么就要將包裹圖片的image先寫出來，再寫入包裹文字的text或view，
wxml代碼如下：
1
2
3
4
上述是一張圖片和文字的鏈接，如需要在一行內填入多張圖片，則只需將上述的圖片和鏈接的地址和文字改改，復制在上述代碼的下行就可以了，規定在同行顯示用wxss來控制，
如下wxss代碼：
.lianjie{
width: 32.8%; //給你的鏈接加入限定的寬，這里用%是因為希望它能等比例適應大小
height: 185px; //給鏈接加入高，這個高是圖片的高加文字的高
display: inline-block; //這個很重要，沒了這個你的圖片就會排隊，排一溜下去~
background-color: #d8f1ca; //給你的鏈接寬設置背景顏色，使它美觀點
margin-left: 0.2%; //希望鏈接屏幕的左邊有點間隙
}
.tp{
width:100%; //在被鏈接包圍下，需要100%的寬度顯示你的圖片
height: 150px; //不要超過鏈接框的高度
margin-top:2px; //讓圖片和鏈接框有點距離
border: 1px solid rgb(250, 250, 250); //圖片外圍加上邊框，使圖片們之間有點間隔
}
.ziti{
font-size: 12px; //字體大小設置
height: 20px; //設置字體所在位置高度
text-align: center; //字體水平居中
line-height: 20px; //字體垂直居中
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
具體wxml代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
注：上述圖片地址都是網絡圖片。而上述代碼中的kuang是用來總體規劃布局的，它的wxss如下：
.kuang{
background-color: #d8f1ca;
width: 100%;
height: 185px;
}
1
2
3
4
5
————————————————
版權聲明：本文為CSDN博主「世木尹」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42800902/article/details/82858083
作者：世木尹 （來源：CSDN）
[聲明] 本文系本網編輯轉載，轉載目的在于傳遞更多信息，并不代表本網贊同其觀點和對其真實性負責。如涉及作品內容、版權和其它問題，請在30日內與本網郵箱 7016867@qq.com 聯系，我們將在第一時間刪除內容！
