button
button是小程序中重要的组件
微信官方api
但是这样的效果都不具备很好的美观性
非表单中实现悬浮按钮效果
将一个 矢量图图标 用小程序控件封装即可这里使用text控件 将矢量图作为其 background-Image代码
wxml
<text class="icon"></text>
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='/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资源网站
注意这里直接使用该url在小程序中是不行的，存在编码错误 下面是一个转编码的网站
转换后的 就可以在小程序中使用粘贴到 wxss中
必须使用Button 又想 实现 图标效果
button有一些其他控件不具备的属性 比如 form 组件中 添加的 button 可以设置 重置表单 提交表单
使用 text 就不行此时我们使用 button 包裹一个 text （前面的实现方法的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 没有边框 看得见内部的 text的样式
