微信小程序 按钮

微信小程序按钮

写小程序按钮使用button时发现：无论如何设置button宽高，都是无效的，即使外面套一层view发现按钮高度也还是无法改变，况且样式还是腾讯的绿色，无法满足美观性，于是可以这样：

• .WXML文件

 <view class='point-item-right'>
        <view class='bx_btn' hover-class="bx_btn_click" bindtap='bxClick'>报 修</view>
      </view>

• WXSS

.bx_btn {
  width: 150rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: #337AB7;
  opacity: 0.6;
  border: 1px solid#d0d0d0;
  border-radius: 20rpx;
  font-size: 14px;
}

.bx_btn_click {
  color: white;
  background: #ec9f10;
}

这样就可以自行设置按钮外观和点击效果了

新加一种，这样也可以实现按钮效果
.wxml

 <navigator url="../order/order?Id={{item.id}}" class="btn">详情</navigator>

.wxss

.btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 14px;
  border-radius: 60rpx;
  border: 1px solid 337AB7;
  color: #337AB7;
}