微信小程序button组件样式

来源:简书 分类: 文章浏览史 发布时间:2020-08-29 20:42:31 最后更新:2020-08-29 浏览:185
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-29 20:42:31
button.png
上图下字.png

需要使用微信小程序button组件open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

默认状态
<button>确定</button>

此时,各项值均为默认值,效果如下:有边框以及圆角


默认状态.png

设置其css如下:背景颜色background-color文字颜色color,设置typeprimary是背景色为微信绿,无法设置背景颜色

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
}
设置背景颜色和文字颜色.png
修改圆角:
.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
  border-radius: 98rpx; 
}
屏幕快照 2018-07-03 18.52.02.png
效果并不好,此时增加
.btn1::after {
  border-radius: 98rpx;
}

效果图如下:


完美圆角效果.png

如果需要取消边框,在::after中增加border: 0;

无边框button.png
这样子的button是达不到UI的要求的,我们还需要添加图片。。。不让自定义。。。没啥前端基础,开始直接在button里面加了张图片,可是就是对不齐,后来问了下别人,然后下面是答案(其实这个我也会啊,突然就是想不到。。。):
 <button class='btn1' open-type='openSetting'>
    <image class='btnImg' src='../../images/wechat.png'></image>
    <view>确定</view>
 </button>

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.btnImg {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}

.btn1::after {
  border-radius: 98rpx;
  border: 0; 
}

效果图如下:


带图片icon的Button.png
还有上图下字效果:
 <button class='btn1' open-type='contact'>
    <image class='btnImg' src='../../images/客服.png'></image>
    <view>联系客服</view>
 </button>

  <button class='btn2' open-type='openSetting'>
    <image class='btnImg' src='../../images/设置.png'></image>
    <view>授权设置</view>
 </button>

.btn1{
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.btnImg {
  width: 50rpx;
  height: 50rpx;
}

.btn1::after {
  border: 0; 
}

 .btn2 {
       width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
 }

 .btn2::after {
  border: 0; 
}
效果图如下:
上图下字.png
点击高亮状态
    //设置none则无高亮状态
    hover-class="none"
    //可以绑定一个class,到css中设置高亮样式
禁止点击状态
disable="true"

此时按钮状态由系统决定,无法改变,但是有时我们又需要自定义,所以

 <button class='{{canSubmit ? "submit": "submitDis"}}' hover-class="none">确定</button>

根据是否可点击状态分别绑定不同的class,最后在点击事件回调中中判断,如果是禁止点击的则直接return
同时,hover-class也可以绑定为一个样式和一个"none",在可点击时,有点击效果,这样比较好的模拟了disable状态,又自定义了效果。

赏我一个赞吧~~~

php技术微信