【微信小程序】分别对确认和取消按钮设置不同的样式,添加自定义的样式类
给确认和取消按钮设置不同的微信小程序样式,你可以使用<button>
标签的class
属性来添加自定义的样式类,并在对应的样式类中定义不同的样式。
以下是一个示例代码,演示如何给确认按钮和取消按钮设置不同的样式:
<button class="confirm-button" bindtap="confirmPopup">确认</button>
<button class="cancel-button" bindtap="hidePopup">取消</button>
在以上代码中,我们给确认按钮添加了confirm-button
样式类,给取消按钮添加了cancel-button
样式类。
然后,在页面的wxss文件中定义对应的样式:
.confirm-button {
background-color: #007AFF;
color: #FFFFFF;
border: none;
padding: 10px 20px;
}
.cancel-button {
background-color: #FFFFFF;
color: #007AFF;
border: 1px solid #007AFF;
padding: 10px 20px;
}
在以上代码中,我们分别定义了confirm-button
和cancel-button
两个样式类。你可以根据需要自行调整样式,例如修改背景颜色、文本颜色、边框样式和内边距等。
请注意,以上代码只是一个简单示例,具体样式可以根据需要进行调整。你可以根据微信小程序的样式规范和需求来定义更多的样式类和样式规则。