小程序 Button圖標(biāo)樣式 實現(xiàn)懸浮按鈕效果
發(fā)布時間：2020-05-13 09:34 所屬欄目：小程序開發(fā)教程
button
button是小程序中重要的組件
微信官方api
但是這樣的效果都不具備很好的美觀性
類似于Android開發(fā)中的懸浮按鈕
表單中的使用
非表單中實現(xiàn)懸浮按鈕效果
將一個 矢量圖圖標(biāo) 用小程序控件封裝即可
這里使用text控件 將矢量圖作為其 background-Image
代碼
wxml
- <text class="icon"></text>
wxss
- 這里使用的是 position fixed 所以可以實現(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在小程序中是不行的，存在編碼錯誤 下面是一個轉(zhuǎn)編碼的網(wǎng)站
轉(zhuǎn)換工具網(wǎng)站 轉(zhuǎn)換后的 就可以在小程序中使用粘貼到 wxss中
必須使用Button 又想 實現(xiàn) 圖標(biāo)效果
button有一些其他控件不具備的屬性 比如 form 組件中 添加的 button 可以設(shè)置 重置表單 提交表單
使用 text 就不行 此時我們使用 button 包裹一個 text （前面的實現(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的樣式。
