微信小程序（7）：常用的表单组件

怼烎@ 2023-01-04 10:27 461阅读 0赞

文章目录

      • 一、button：按钮
          • 1、type：按钮的样式类型
          • 2、size：按钮的大小
          • 3、plain：按钮是否镂空，背景色透明
          • 4、disabled：是否禁用
          • 5、loading：名称前是否带 loading 图标
          • 6、form-type：用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
          • 7、open-type：微信开放能力
          • 8、hover-class：指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果
      • 二、checkbox：多选
      • 三、radio：单选
      • 四、input：输入框
          • 1、placeholder：输入框为空时占位符
          • placeholder-style：指定 placeholder 的样式
          • placeholder-class：指定 placeholder 的样式类
          • 2、type：input 的类型
          • 3、cursor-spacing：指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
          • 4、confirm-typeconfirm-type：设置键盘右下角按钮的文字，仅在type=’text’时生效
      • 五、switch：开关选择器

一、button：按钮

button 的属性有很多，比如以下几个：

1、type：按钮的样式类型

在这里插入图片描述

  1. <button type="primary">提交</button>
  2. <button type="default">提交</button>
  3. <button type="warn">提交</button>

在这里插入图片描述

2、size：按钮的大小

在这里插入图片描述

  1. <button type="primary" size="mini">提交</button>
  2. <button type="default" size="mini">提交</button>
  3. <button type="warn" size="mini">提交</button>

在这里插入图片描述

3、plain：按钮是否镂空，背景色透明
  1. <button type="primary" plain>提交</button>
  2. <button type="default" plain>提交</button>
  3. <button type="warn" plain>提交</button>

在这里插入图片描述

4、disabled：是否禁用
  1. <button type="primary" disabled>提交</button>

在这里插入图片描述

5、loading：名称前是否带 loading 图标
  1. <button loading>数据加载中...</button>

在这里插入图片描述

6、form-type：用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件

在这里插入图片描述

  1. <form>
  2.   <input></input>
  3.   <input></input>
  4.   <input></input>
  5.   <button type="warn" form-type="reset">重置</button>
  6. </form>

在这里插入图片描述

7、open-type：微信开放能力

在这里插入图片描述

  1. <button open-type="getUserInfo">获取权限</button>

在这里插入图片描述

8、hover-class：指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果

二、checkbox：多选

在这里插入图片描述

  1. <label>
  2.   <checkbox/>小程序
  3. </label>
  5. <label>
  6.   <checkbox></checkbox>小程序
  7. </label>

在这里插入图片描述

三、radio：单选

在这里插入图片描述

  1. <label>
  2.   <radio checked></radio>选中
  3.   <radio></radio>未选中
  4. </label>

在这里插入图片描述

四、input：输入框

1、placeholder：输入框为空时占位符
placeholder-style：指定 placeholder 的样式
placeholder-class：指定 placeholder 的样式类
  1. <input placeholder="请输入..."></input>
  3. input{ 
  4.    border: 1px solid #ccc;
  5.  }

在这里插入图片描述

  1. <input placeholder="请输入..." placeholder-style="color:pink"></input>

在这里插入图片描述

2、type：input 的类型

在这里插入图片描述
例如为 number 时：

  1. <input placeholder="请输入..." type="number"></input>

在这里插入图片描述

3、cursor-spacing：指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  1. <input placeholder="请输入..." type="number" cursor-spacing="100"></input>

在这里插入图片描述

4、confirm-typeconfirm-type：设置键盘右下角按钮的文字，仅在type=’text’时生效

在这里插入图片描述

五、switch：开关选择器

在这里插入图片描述

  1. <switch type="checkbox" checked></switch>选中
  2. <switch type="switch" checked></switch>
  3. <switch type="switch" color="pink"></switch>

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，461人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序表单验证

    由于微信小程序表单组件没有自带的验证功能，因此要针对每一项进行判断比较繁琐 因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接[微信小

    心已赠人心已赠人/ 0 赞/ 29 阅读

    相关 微信小程序 - 组件

    > 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。 一、基础组件 > 基础组件主要分为：视图容

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 714 阅读