button

button是小程序中重要的組件

微信官方api

但是這樣的效果都不具備很好的美觀性

類似于Android開發(fā)中的懸浮按鈕

表單中的使用

非表單中實(shí)現(xiàn)懸浮按鈕效果

將一個(gè) 矢量圖圖標(biāo) 用小程序控件封裝即可
這里使用text控件 將矢量圖作為其 background-Image

代碼

wxml

1. <text class="icon"></text>

wxss

1. 這里使用的是 position fixed 所以可以實(shí)現(xiàn) 位置固定 類似懸浮按鈕
2. .icon {
3. bottom: 88rpx;
4. right: 50rpx;
5. position: fixed;
6. width: 100rpx;
7. height: 100rpx;
8. background-color: white;
9. border-radius: 50%;
10. background-size: 72% 72%;
11. background-position: center;
12. background-repeat: no-repeat;
13. 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");
14. }

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

<button class="submitClass" form-type="submit" bindtap="submitForm">
<text class="circle"></text>
</button>
<button form-type="reset" bindtap="resetForm" class="submitClass">
<text class="circleL"></text>
</button>

wxss

.submitClass{
margin-top: 160rpx;
margin-bottom: 25rpx;
background: none !important;
color: #000 !important;
}

這里的button的wxss 讓 button 沒有邊框 看得見內(nèi)部的 text的樣式。