button

　　button是小程序中重要的組件

　　微信官方api

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

　　類似于Android開發中的懸浮按鈕

　　表單中的使用

　　非表單中實現懸浮按鈕效果

　　將一個 矢量圖圖標 用小程序控件封裝即可

　　這里使用text控件 將矢量圖作為其 background-Image

　　代碼

　　wxml

　　wxss

　　這里使用的是 position fixed 所以可以實現 位置固定 類似懸浮按鈕

　　.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資源網站

　　海量精美矢量圖

　　復制 svg 代碼 注意這里直接使用該url在小程序中是不行的，存在編碼錯誤 下面是一個轉編碼的網站

　　轉換工具網站 轉換后的 就可以在小程序中使用粘貼到 wxss中

　　必須使用Button 又想 實現 圖標效果

　　button有一些其他控件不具備的屬性 比如 form 組件中 添加的 button 可以設置 重置表單 提交表單

　　使用 text 就不行 此時我們使用 button 包裹一個 text (前面的實現方法的text)

　　代碼

　　wxml

　　1

　　2

　　3

　　4

　　5

　　6

　　wxss

　　1.submitClass{

　　2margin-top: 160rpx;

　　3margin-bottom: 25rpx;

　　4background: none !important;

　　5color: #000 !important;

　　6}

　　這里的button的wxss 讓 button 沒有邊框 看得見內部的 text的樣式。