小程序开发 button的使用

版权声明

本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17337461.html

本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

前言

  此篇博客讲解小程序开发使用的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;
}

宽高设置无效的情况

有时候size="mini" 属性不添加会导致我们无法设置button高度与宽度(也有可能设置了size="mini" 也会出现) 

解决方式一

直接添加style属性进行修改

    <button class="send-btn" style="width: 100px;">发送</button>

解决方式二

在wxss的属性里增加!important

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

 

 

End