button
button是小程序中重要的組件
微信官方api
但是這樣的效果都不具備很好的美觀性
類似于Android開(kāi)發(fā)中的懸浮按鈕
表單中的使用
非表單中實(shí)現(xiàn)懸浮按鈕效果
將一個(gè) 矢量圖圖標(biāo) 用小程序控件封裝即可
這里使用text控件 將矢量圖作為其 background-Image
代碼
wxml
wxss
這里使用的是 position fixed 所以可以實(shí)現(xiàn) 位置固定 類似懸浮按鈕
.icon {
bottom: 88rpx;
right: 50rpx;
position: fixed;
width: 100rpx;
height: 100rpx;
background-color: white;
border-radius: 50%;
background-size: 72% 72%;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg t='1587350579334' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3978' width='32' height='32'%3E%3Cpath d='M488 488V192a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16v296H832a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H536V832a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V536H192a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16h296z' p-id='3979'%3E%3C/path%3E%3C/svg%3E");
}
background-image資源網(wǎng)站
海量精美矢量圖
復(fù)制 svg 代碼 注意這里直接使用該url在小程序中是不行的，存在編碼錯(cuò)誤 下面是一個(gè)轉(zhuǎn)編碼的網(wǎng)站
轉(zhuǎn)換工具網(wǎng)站 轉(zhuǎn)換后的 就可以在小程序中使用粘貼到 wxss中
必須使用Button 又想 實(shí)現(xiàn) 圖標(biāo)效果
button有一些其他控件不具備的屬性 比如 form 組件中 添加的 button 可以設(shè)置 重置表單 提交表單
使用 text 就不行 此時(shí)我們使用 button 包裹一個(gè) text (前面的實(shí)現(xiàn)方法的text)
代碼
wxml
1
4
wxss
1.submitClass{
2margin-top: 160rpx;
3margin-bottom: 25rpx;
4background: none !important;
5color: #000 !important;
6}
這里的button的wxss 讓 button 沒(méi)有邊框 看得見(jiàn)內(nèi)部的 text的樣式。