微信小程序（组件--表单：交互控件）

谁践踏了优雅 2023-06-19 09:54 31阅读 0赞

【本节大纲】
（1）input输入框组件
（2）textarea多行输入框组件
（3）form表单组件
（4）radio-group单选选择器与radio单选项目
（5）label关联组件
（6）checkbox-group多选选择器与checkbox多选项目

表单组件

（1）input输入框组件

基础属性：























































属性 类型 默认值 是否必填 作用
value string 无 否 输入框的初始内容
type string text 否 input 的类型
password boolean false 否 是否是密码类型
disabled boolean false 否 是否禁用
maxlength number 140 否 最大输入长度，设置为 -1 的时候不限制最大长度
placeholder string 无 否 输入框为空时占位符
1、type类型—type属性值

























值 作用
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘

在这里插入图片描述

2、占位符placeholder属性


























属性 类型 默认值 是否必填 作用
placeholder-style string 无 否 指定 placeholder 的内联样式
placeholder-class string input-placeholder 否 指定 placeholder 的样式类名 
  1. <input placeholder="请输入姓名" placeholder-style="color:#e1565b;font-size:20rpx;"></input>

注意：placeholder字体大小默认与input字体大小相同，不能分开设置，不然应用户体验。
方案：给input设置字体大小即可

  1. <input placeholder="请输入姓名" 
  2. placeholder-class="placeClassName"></input>
  4. .placeClassName{ 
  5.   color: blue;
  6. }
3、焦点类属性

































属性 类型 默认值 是否必填 作用
focus boolean false 否 获取焦点，加上后会自动聚焦
bindfocus function 无 否 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
bindblur function 无 否 输入框失去焦点时触发，event.detail = {value: value}

bindfocus：

  1. <input placeholder="请输入姓名" 
  2. value="默认初始值"
  3. bindfocus="bindfocusFn"
  4. placeholder-class="placeClassName"></input>
  6. /**获取授权页面相关数据 */
  7.   bindopensettingFn(option){ 
  8.     console.log(option)
  9.   },

在这里插入图片描述
bindblur：

  1. <input placeholder="请输入姓名" 
  2. value="默认初始值"
  3. bindfocus="bindfocusFn"
  4. bindblur="bindblurFn"
  5. placeholder-class="placeClassName"></input>
  7. /**输入框失去焦点时触发 */
  8.   bindblurFn(option){ 
  9.     console.log(option)
  10.   },

在这里插入图片描述

4、键盘与键盘按钮

































属性 类型 默认值 是否必填 作用
confirm-type string done 否 设置键盘右下角按钮的文字，仅在type=’text’时生效
cursor-spacing number 0 否 聚焦时光标离软键盘的距离(了解即可)
bindconfirm function 无 否 点击完成按钮时触发，event.detail = {value: value}

confirm-type属性值：






























值 作用
send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”

一般需要开发人员根据业务的情景选择合适的confirm-type
在这里插入图片描述

注意：confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。

场景：当填写项较多时，可能超出当前屏幕，此时需要对弹起的软键盘做些处理
在这里插入图片描述












cursor-spacing number 0 否 聚焦时光标离软键盘的距离 
  1. <input placeholder="0" cursor-spacing="0"></input>
  2. <input placeholder="50" cursor-spacing="50"></input>
  3. <input placeholder="100" cursor-spacing="100"></input>

在这里插入图片描述












bindconfirm function 无 否 点击完成按钮时触发，event.detail = {value: value} 
  1. <input type="text"
  2. bindconfirm="bindconfirmSearch"
  3. placeholder="请输入搜索商品"
  4. confirm-type="search"></input>
  6. /**点击完成按钮时触发 */
  7.   bindconfirmSearch(option){ 
  8.     console.log(option)
  9.   },

在这里插入图片描述

input输入框现有bug：
  1. 部分微信版本placeholder 在聚焦时出现重影问题
  2. 部分机型 focus 属性设置无效
  3. input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family

（2）textarea多行输入框组件



















































































属性 类型 默认值 是否必填 作用
value string 无 否 输入框的内容
placeholder string 无 否 输入框为空时占位符
placeholder-style string 无 否 指定 placeholder 的内联样式，目前仅支持color和font-weight，不支持font-size、background等属性
placeholder-class string textarea-placeholder 否 指定 placeholder 的样式类名
disabled boolean false 否 是否禁用
maxlength number 140 否 最大输入长度，设置为 -1 的时候不限制最大长度
auto-focus boolean false 否 自动聚焦，拉起键盘
auto-height boolean false 否 是否自动增高，设置auto-height时，style.height不生效
bindinput function 无 否 当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}
bindconfirm function 无 否 点击完成按钮时触发，event.detail = {value: value}

应用场景：发表评论或发布帖子，点击按钮跳到评论页面

  1. <button bindtap="commentPage">评论</button>
  3. /**评论 */
  4.   commentPage(){ 
  5.     wx.navigateTo({ 
  6.       url: 'comment/comment',
  7.     })
  8.   },

在这里插入图片描述
发布评论页面代码块

  1. <view class="commentArea">
  2.   <textarea placeholder="请输入您的评论（最大200字）"
  3.   maxlength="200"
  4.   auto-focus="true"></textarea>
  5.   <button type="primary">取消</button>
  6.   <button type="warn">发表</button>
  7. </view>
  9. .commentArea{ 
  10.   width: 100%;
  11.   height: 300rpx;
  12.   padding: 20rpx 5%;
  13.   box-sizing: border-box;
  14.   display: flex;
  15.   justify-content: space-around;
  16.   flex-wrap: wrap;
  17. }
  18. .commentArea textarea{ 
  19.   display: block;
  20.   width: 100%;
  21.   height: 100%;
  22.   position: relative;
  23.   z-index: 3;
  24.   padding: 10rpx;
  25.   box-sizing: border-box;
  26. }
  27. .commentArea textarea::after{ 
  28.   content: "";
  29.   width: 200%;
  30.   height: 200%;
  31.   position: absolute;
  32.   left: 0;
  33.   top: 0;
  34.   border: 1px solid rgba(0, 0, 0, 0.2);
  35.   transform: scale(0.5);
  36.   transform-origin: 0 0;/**元素缩放基点 */
  37.   z-index: 2;
  38. }
  39. .commentArea button{ 
  40.   display: inline-block;
  41.   font-size: 30rpx;
  42.   margin: 20rpx 0;
  43.   line-height: 50rpx;
  44.   color: #fff;
  45. }











bindinput function 无 否 当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}

在这里插入图片描述

  1. /**当键盘输入时，触发 input 事件 */
  2.   textareaInputFn(option){ 
  3.     console.log(option)
  4.   },

在这里插入图片描述












bindconfirm function 无 否 点击完成按钮时触发，event.detail = {value: value}

在这里插入图片描述
在这里插入图片描述

（3）form表单组件

作用：将组件内的用户输入的switch input checkbox slider radio picker 提交



























属性 类型 默认值 是否必填 作用
bindsubmit function 无 否 触发 submit 事件，提交表单数据 event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreset function 无 否 表单重置时会触发 reset 事件

注意：当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

回顾下button按钮组件

form-type触发表单提交/重置操作




















属性 类型 默认值 是否必填 作用
form-type string 无 否 用于 form 组件，点击分别会触发 form 组件的 submit提交/reset重置 事件

form-type 属性值


















值 说明
submit 提交表单
reset 重置表单
form表单组件–提交评论操作

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5

  1. /**提交表单 */
  2.   bindsubmitFn(option){ 
  3.     console.log(option)
  4.   },

在这里插入图片描述

注意：
提交表单时，必要在需要提交信息的表单组件上，加上 name 来作为 key，否则会获取不到相关信息

接下来做些完善，评论完毕后弹框提示，然后返回上一页面

  • 完善一

    /*提交表单 /
    bindsubmitFn(option){ 

    1. wx.showToast({ 
    2.   title: '评论成功',
    3.   duration: 3000,
    4.   success(){ 
    5.     setTimeout(function(){ 
    6.       wx.navigateBack({ 
    7.         dalta:1
    8.       })
    9.     },1000)
    10.   }
    11. })

    },

接下来接着做完善，提交时验证最少10个字，否则弹框提示

  • 完善二

    /*提交表单 /
    bindsubmitFn(option){ 

    1. if(option.detail.value.textarea.lenght < 10){ 
    2.   wx.showToast({ 
    3.     icon: 'none',
    4.     title: '最少10个字'
    5.   })
    6. }else{ 
    7.   wx.showToast({ 
    8.     title: '评论成功',
    9.     duration: 3000,
    10.     success() { 
    11.       setTimeout(function () { 
    12.         wx.navigateBack({ 
    13.           dalta: 1
    14.         })
    15.       }, 1000)
    16.     }
    17.   })
    18. }

    },

接下来接着做完善，输入字体时，实时监听目前输入多少字

  • 完善三
    ①实时获取输入时字体数量
    在这里插入图片描述

    /*动态监听字数 /
    textareaInputFn(option){ 

    1. console.log(option)

    },

在这里插入图片描述
②接下来接着做完善，输入字体时，实时监听目前输入多少字
在这里插入图片描述

  1. .fontCountClass{ 
  2.   position: absolute;
  3.   right: 0;
  4.   bottom: 0;
  5.   font-size: 30rpx;
  6.   color: #b1aeae;
  7. }
  9. data: { 
  10.     fontCount:0
  11.   },
  12. /**动态监听字数 */
  13.   textareaInputFn(option){ 
  14.     console.log(option.detail.cursor)
  15.     this.setData({ 
  16.       fontCount:option.detail.cursor
  17.     })
  18.   },

在这里插入图片描述

form表单组件–取消评论操作

在这里插入图片描述

  1. /**重置取消，返回上一页 */
  2.   bindresetFn(option){ 
  3.     wx.navigateBack({ 
  4.       delta: 1
  5.     })
  6.   },
form表单组件–提交评论操作

radio-group单选选择器与radio单选项目

  • ①radio-group单项选择器，内部由多个 radio 组成



















属性 类型 默认值 是否必填 作用
bindchange function 无 否 checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
  • ②radio单选项目








































属性 类型 默认值 是否必填 作用
value string 无 否 radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value
checked boolean false 否 当前是否选中
disabled boolean false 否 是否禁用
color string #09BB07 否 radio的颜色，同css的color

radio-group单选选择器与radio单选项目

  1. 性别：<radio-group>
  2.   <radio name="man" checked="true">男</radio>
  3.   <radio name="woman">女</radio>
  4.   <radio name="no" disabled="true">中性</radio>
  5. </radio-group>

在这里插入图片描述
有时单选项目过多时，需要用到循环指令wx:for

  1. 爱好：<radio-group>
  2.   <label wx:for="{ {likeList}}" wx:key="index">
  3.     { { item.value}}
  4.     <radio value="{ {item.name}}" checked="{ {item.checked}}"></radio>
  5.   </label>
  6. </radio-group>
  8. likeList:[
  9.       {  name: 'swim', value: '游泳' },
  10.       {  name: 'climd', value: '爬山',checked:'true' },
  11.       {  name: 'fitness', value: '健身' },
  12.       {  name: 'sing', value: '唱歌' },
  13.     ]

在这里插入图片描述












bindchange function 无 否 checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

在这里插入图片描述

  1. /**单选按钮更改时触发 */
  2.   radioChangeFn(option){ 
  3.     console.log(option)
  4.   },

在这里插入图片描述
在这里插入图片描述

form表单组件–关联组件label
  • label组件用来改进表单组件的可用性
  • 作用：使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
  • 目前可以绑定的控件有：button, checkbox, radio, switch



















属性 类型 默认值 是否必填 作用
for string 无 否 绑定控件的 id 
  1. 国籍：<radio-group class="countryClass">
  2.   <label wx:for="{ {countryList}}" wx:key="index">
  3.     <radio value="{ {item.name}}" checked="{ {item.checked}}"></radio>
  4.     { { item.value}}
  5.   </label>
  6. </radio-group>
  8. .countryClass label{ 
  9.   display: block;
  10. }
  12. countryList:[
  13.       {  name: 'zg', value: '中国' },
  14.       {  name: 'mg', value: '美国',checked:true },
  15.       {  name: 'jnd', value: '加拿大' },
  16.       {  name: 'rb', value: '日本' },
  17.     ]

在这里插入图片描述

form表单组件–多选组件

checkbox-group多选选择器与checkbox多选项目

  1. checkbox-group多选选择器



















属性 类型 默认值 是否必填 作用
bindchange function 无 否 checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
  1. checkbox多选项目








































属性 类型 默认值 是否必填 作用
value string 无 否 checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked boolean false 否 当前是否选中，可用来设置默认选中
disabled boolean false 否 是否禁用
color string #09BB07 否 checkbox的颜色，同css的color 
  1. <checkbox-group bindchange="likeChangeFn">
  2.   <label wx:for="{ {likeList}}" wx:key="index">
  3.     <checkbox value="{ {item.name}}" checked="{ {item.checked}}"></checkbox>
  4.     { { item.value}}
  5.   </label>
  6. </checkbox-group>

在这里插入图片描述
在这里插入图片描述

  1. /**单选按钮更改时触发 */
  2.   radioChangeFn(option){ 
  3.     console.log(option)
  4.   },

发表评论

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

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

相关阅读

    相关 微信小程序表单验证

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

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