请首先记住,button可以使用任何想要使用的样式,没有限制,前端都可以做。
step1 wxml
<button open-type='share' class="share" style="background-image:url(../../imgs/icon_2_forward@2x.png);" plain='true'></button>
button 因为自带的各种各样的作用,所以open-type选一个就可以了。
注意:
-
plain='true'
与只是将plain
放在那里的效果是一样的,这是一类,默认只要放上去就会相当于有了一个默认的值。 - 其实此处的plain完全没有起作用,起作用的是样式里的
opacity:0
的设置
bug1 :
小程序如果使用直接给button设置背景图片的方式,那么,安卓不显示。
解决方式:将button设为opacity:0
然后定位放在那副图片的上边。
opacity:0
VSvisibility: hidden;
VSdisplay:none
:
opacity
是用来设置元素的不透明级别的。
visibility
是虽然不可见,但是占据着那个位置,元素也不在,用来作为一些表单提醒的位置占位符最好了,比如这种
image.png
style='visibility: {{numEnough?"hidden":"visible"}};'
此时应用是最好的。但是元素hidden的时候是不存在的,只保留了位置。display
是既不保存位置,也看不到,元素也不存在于那个位置上。
背景图片使用方式:
- 背景图片是不支持在css中被引用资源的
- 会降低页面的渲染速度,内联样式
- 一个可以转换成base64的条件:如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新。
from:https://www.cnblogs.com/coco1s/p/4375774.html
<button open-type='share' class="share" ></button>
分析:若是将背景图片放在css中,也会比较慢。
暂时做法:体感,写在内联样式中稍微快一点点
step 2 wxss
.goBack .share{
width: 38rpx;
height: 36rpx;
padding:0 20rpx;
position: absolute;
right: 32rpx;
top: 0;
bottom: 0;
margin: auto;
background-size: 38rpx 36rpx;
background-repeat:no-repeat;
border:none;
}
background-size
与background-repeat
与border:none;
是button必须的
至此,完成。
分享按钮效果