微信小程序 按钮

按钮"/>

微信小程序 按钮

微信小程序按钮

写小程序按钮使用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;
}