小程序上设置button样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序上设置button样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<button>确定</button>

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

小程序按钮样式,微信小程序,前端基础,小程序,css,html

设置其css如下：背景颜色background-color文字颜色color,设置type为primary是背景色为微信绿，无法设置背景颜色

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
}

小程序按钮样式,微信小程序,前端基础,小程序,css,html

修改圆角：

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
  border-radius: 98rpx; 
}

小程序按钮样式,微信小程序,前端基础,小程序,css,html

效果并不好，此时增加

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

效果图如下：

小程序按钮样式,微信小程序,前端基础,小程序,css,html

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

小程序按钮样式,微信小程序,前端基础,小程序,css,html

这样子的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; 
}

效果图如下：

小程序按钮样式,微信小程序,前端基础,小程序,css,html

还有上图下字效果：

 <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; 
}

效果图如下：

小程序按钮样式,微信小程序,前端基础,小程序,css,html

点击高亮状态

    //设置none则无高亮状态
    hover-class="none"
    //可以绑定一个class，到css中设置高亮样式

禁止点击状态

disable="true"

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

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

根据是否可点击状态分别绑定不同的class，最后在点击事件回调中中判断，如果是禁止点击的则直接return
同时，hover-class也可以绑定为一个样式和一个"none",在可点击时，有点击效果，这样比较好的模拟了disable状态，又自定义了效果。文章来源地址https://www.toymoban.com/news/detail-524271.html

到了这里，关于小程序上设置button样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！