button边框去除
相信大家开发微信小程序时使用button会遇到一些与预期效果不同的样式问题。例如button的边框无法去除，在为button设置圆角的时候周围会有一些"杂质"，像这样：
边框的存在，使得显示效果并不理想
我们来看一下预期效果：
预期的效果，对比之下效果非常明显
话不多说，直接上关键代码，只需要css样式更改：
/*button样式这里可以根据需求自定义，此处贴出完整css。文章结尾拓展话题会使用，感兴趣的同学可以阅读 */
.button{width: 90%;
height: 80rpx;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
border-radius: 80rpx;
background-color: #FED322;
}
/*关键代码 .class::after{border:0} 或 .class::after{border:none} 去除边框 */
.button::after{
border: 0;
}
原因
熟悉css的同学都知道，控件都具有默认css样式。当为控件设置css样式时，会覆盖默认样式。说到这里大家应该都明白了，微信小程序button控件的边框默认样式是存在于 .class::after中的，因此只需要覆盖.class::after中的默认样式即可去除边框。
button设置背景图片
button设置背景图代码如下：
.button{
background-image: url('http://********.******.cn/9.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
需要注意的是，url中不可以使用本地图片
使用本地图片资源，出现渲染层网络错误
解决方案：
1.将需要作为背景的图片上传至服务器后获取链接使用；
2.使用本地图片，通过样式设置将button放置于image标签之上；
拓展
- button字体居中问题
- button点击效果问题
button字体居中问题
上面的代码除了关键css样式，还设置了
display: flex;
align-items: center;
justify-content: center;
tips：当你需要更改button按钮上文字大小时，使用flex居中布局可以避免因为文字或按钮大小更改而导致的button文字不居中问题。
当然该方式依旧存在限制，当button控件宽高过小时，文字会出现换行现象。此时应避免使用尺寸过小的button，过小的button不利于用户点击，同时也是微信小程序并不提倡的样式。
button点击效果问题
button控件在用户触摸时会有反馈，这样做的目的是使交互效果更加完善
官方文档给出的注释：
注1：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
需要注意的是，当你为button设置了background-image或者background-color时，button的‘hover’交互效果是会消失的
此时可以使用.class:active简单的复原‘hover’交互效果
.buttonBgImg:active{
background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7;
}
此时的效果与默认‘hover’效果是存在区别的，如果你追求完美，可以使用js中提供的bindtouchstart和bindtouchend配合来完成这个效果。同时，若你使用本地图片作为背景图时需要添加'hover'交互效果时，css无法满足需求，也可以使用js事件的方式完成该效果。
tips:后续会更新用于预览文章内效果的小程序码
网友评论