?作者簡(jiǎn)介：CSDN內(nèi)容合伙人、阿里云專家博主、51CTO專家博主??
??個(gè)人主頁(yè)：hacker707的csdn博客
??系列專欄：微信小程序??
??個(gè)人格言：不斷的翻越一座又一座的高山，那樣的人生才是我想要的。這一馬平川，一眼見(jiàn)底的活，我不想要,我的人生，我自己書(shū)寫(xiě)，余生很長(zhǎng)，請(qǐng)多關(guān)照，我的人生，敬請(qǐng)期待??????
其他常用組件
①button
按鈕組件
功能比HTML中的button按鈕豐富
②image
圖片組件
image組件默認(rèn)寬度約300px、高度約240px
③navigator
頁(yè)面導(dǎo)航組件
類似于HTML中的a鏈接
button按鈕的基本使用
?通過(guò)type屬性指定按鈕顏色類型
<button>普通按鈕</button>
<button type="primary">主色調(diào)按鈕</button>
<button type="warn">警告按鈕</button>
?size=“mini” 小尺寸按鈕
<button size="mini">普通按鈕</button>
<button type="primary" size="mini">主色調(diào)按鈕</button>
<button type="warn" size="mini">警告按鈕</button>
?plain 鏤空按鈕
<button size="mini" plain>普通按鈕</button>
<button type="primary" size="mini" plain>主色調(diào)按鈕</button>
<button type="warn" size="mini" plain>警告按鈕 </button>
image組件的基本使用
?使用src 指向圖片路徑
<image src="/images/秦霄賢.png"></image>
image組件的mode屬性
image組件的mode屬性用來(lái)指定圖片的裁剪和縮放模式，常用的mode屬性值如下：
| mode值 | 說(shuō)明 |
|---|---|
| scaleToFill | (默認(rèn)值)縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素 |
| aspectFit | 縮放模式，保持縱橫比縮放圖片，使圖片長(zhǎng)邊能完全顯示出來(lái)，也就是說(shuō)，可以完整地將圖片顯示出來(lái) |
| aspectFill | 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)，也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取 |
| widthFix | 縮放模式，寬度不變，高度自動(dòng)變化，保持原圖寬高比不變 |
| heightFix | 縮放模式，高度不變，寬度自動(dòng)變化，保持原圖寬高比不變 |
?使用實(shí)例：
<image src="/images/秦霄賢.png" mode="aspectFit"></image>
<image src="/images/秦霄賢.png" mode="aspectFill"></image>
<image src="/images/秦霄賢.png" mode="widthFix"></image>
<image src="/images/秦霄賢.png" mode="heightFix"></image>
結(jié)束語(yǔ)??
以上就是微信小程序之button和image組件的基本使用
持續(xù)更新微信小程序教程，歡迎大家訂閱系列專欄??微信小程序
你們的支持就是hacker創(chuàng)作的動(dòng)力??????文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-487792.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-487792.html
到了這里，關(guān)于【微信小程序】button和image組件的基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
