前端开发-按钮

一、按钮的基础样式

按钮有一些系统的样式

1. 绿色按钮

其实就是按钮颜色为绿色

心理测评

重点是type=“primary”

2. 红色按钮

退出

3. 小尺寸

支付

字比正常情况下小

4. plain设置按钮镂空

 
   dchbj

   登录

5. disabled设置按钮禁用

登录
   

二、按钮样式设计（尺寸）

1. 正常样式详细教程

其实和HTML很像，wxss文件如下

.btn1{
  float: left;//按钮靠左
  width: 300px;//你会发现操作不了按钮的宽度，后续会有方法
  height: 120px;
  margin-top: 40px;//离上一个模块的距离
  margin-left: 3px;             //离左侧的距离
  margin-bottom: 9rpx;           
  background-color: #61E6D7;   //按钮颜色
 
}

2. 设置图片按钮（按钮上有个图片）

 环境

图片样式可以在wxss文件的class=btn-img中进行设置

3. 设置按钮宽度

这里的按钮宽度在wxss文件中设置不了，这里有一个方法可以设置

 环境

就是直接在wxml文件中设置，如上述代码，直接设置style，当宽度设置合适，按钮会自动并入一排（并列）