526互联

小程序开发 button的使用

发布时间 2023-04-20 17:02:41作者: 观心静

前言

  此篇博客讲解小程序开发使用的button

官方模板例子

效果图

wxml

<!--pages/button/button.wxml-->
<!-- 
    普通按钮
type的三种颜色  primary    绿色  default白色  warn    红色 -->
<button>按钮A</button>
<button type="primary">主题色按钮</button>
<button type="warn">警告按钮</button>

<!-- 小尺寸按钮 -->
<button size="mini" style=" margin-top: 100px;">小尺寸按钮</button>
<view>
    <button type="primary" size="mini" style="margin-top: 10%;">小尺寸按钮</button>
</view>

<!-- 镂空按钮 -->
<button size="mini" plain>镂空按钮</button>
<button type="primary" size="mini" plain>镂空按钮</button>
<button type="warn" size="default" plain>镂空按钮</button>

自定义按键实现

 

按下效果实现

效果图

 

wxml

hover-class是实现按下效果关键

     <button class="send-btn" hover-class="press-send-btn">发送</button>

wxss

.send-btn{
    background-color: rgb(83, 206, 236);
    color: white;
    border-radius: 10px;
    font-size: 18px;
}

.press-send-btn{
    background-color: rgb(71, 126, 139);
    color: white;
    border-radius: 10px;
    font-size: 18px;
}

 

End