微信小程序学习（5）- 上

4. 表单组件

4.1 button

• size: 大小, 属性值: default、mini
• type: 类型，属性值: default (白色)、 primary (绿色)、warm (红色)
• plain: 背景色镂空, 是否透明背景色, 默认值 false
• disabled: 禁用, 默认值 false
• loading: 名词前是否带 loading 图标, 请求后端数据会发生延迟时可用
• form-type: 表单控制，属性值: submit (提交)、reset (重置)
• hover-class: 按钮按下去的样式类, 有默认值
• hover-stop-propagation: 阻止冒泡事件, 默认值 false
• hover-start-time / hover-stay-time: 点击/松开 多久出现样式 默认值 20/70 毫秒
• 其他属性，即微信开发能力，这里先不介绍了

​ button 的 bindtap 事件主要是与表单绑定与后台交互，而 view 的 bindtap 主要是用在页面效果切换上

<button type='primary' size="mini" plain disabled>hah</button>

4.2 checkbox-group & checkbox & label

4.2.1 checkbox-group 多项选择器

• 由多个 checkbox 组成
• bindchange: 选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

4.2.2 checkbox 多选项目

• value: 值, 选中时, 携带的给 checkbox-group 的 change 事件
• disabled: 禁用, 默认值 false
• checked: 选中, 默认值 false
• color: 选中颜色

4.2.3 label 标注

• for 绑定对应的选项id

​ 主要是为了点击选项值时，附带选中选择框，可以与 、、、 配合使用

​ 一下例子是自定义选项框的例子

<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
<view class="label-1" wx:for="{{checkboxItems}}">
<label>
<!-- 隐藏选项框 -->
<checkbox
hidden
value="{{item.name}}"
checked="{{item.checked}}"
></checkbox>
<view class="label-1__icon">
<!-- 自定义选项框 -->
<view
class="label-1__icon-checked"
style="opacity:{{item.checked ? 1: 0}}"
></view>
</view>
<text class="label-1__text">{{item.value}}</text>
</label>
</view>
</checkbox-group>
</view>

Page({
data: {
items: [
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' },
]
},
checkboxChange(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
})

.label-1 {
margin-bottom: 15px;
}
.label-1__text {
display: inline-block;
vertical-align: middle;
}

.label-1__icon {
position: relative;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
background: #fcfff4;
}

.label-1__icon-checked {
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
background: #1aad19;
}

4.3 form 表单

• bindsubmit 提交事件
• bindreset 重置事件

​ 可以用 的 form-type 属性触发上面事件，提交时，需要 form 的子标签有对应的 name 属性，才可以绑定数据，类似 H5

4.4 input 输入框 (手机端测试)

• value: 值
• type: 类型，属性值：text (默认值 文本输入键盘)、number（整数输入键盘）、 idcard（身份证输入键盘 带X）、 digit（浮点数输入键盘）
• password: 密码类型，默认值 false
• placeholder: 占位符，提醒功能，如请输入用户名
• placeholder-style/ palceholder-class: 占位符 颜色/样式，默认灰色,
• maxlength: 最大输入长度，默认 140，设置 -1 则不限制长度
• cursor-spacing： 指定光标与键盘距离，当输入框在底部时，键盘会撑开，使屏幕上移，cursor-spacing 就是为了设置 输入框跟键盘的距离，默认是 0,一般不改动
• focus: 自动获取焦距，默认值 false
• confirm-type: 设置键盘右下角的文字，默认值 done，一般设置为 next
• confirm-hold: 点击键盘右下角是否保持键盘不收起，与 confirm-type 配合使用, 默认值为 false
• cursor: 光标起始位置
• selection-start / selection-end: 配合使用，默认选择一段文字，自动聚焦时有用
• adjust-position: 键盘弹起时，是否自动上推页面，默认值 true，用不着false
• bindinput / bindfocus / bindblur / bindconfirm: 输入 / 聚焦 / 失焦 / 提交 时触发的事件，input 事件可以 return 一段字符串 替换文本框内容，比如字段校验

<!--input.wxml-->
<view class="section">
<input placeholder="这是一个可以自动聚焦的input" auto-focus />
</view>
<view class="section">
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<view class="btn-area">
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
<view class="section">
<input maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
<view class="section__title">你输入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中" />
</view>
<view class="section">
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
<input password type="number" />
</view>
<view class="section">
<input password type="text" />
</view>
<view class="section">
<input type="digit" placeholder="带小数点的数字键盘" />
</view>
<view class="section">
<input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
<input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>

// input.js
Page({
data: {
focus: false,
inputValue: ''
},
bindButtonTap() {
this.setData({
focus: true
})
},
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value
})
},
bindReplaceInput(e) {
const value = e.detail.value
let pos = e.detail.cursor
if (pos != -1) {
// 光标在中间
const left = e.detail.value.slice(0, pos)
// 计算光标的位置
pos = left.replace(/11/g, '2').length
}

// 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/11/g, '2'),
cursor: pos
}

// 或者直接返回字符串,光标在最后边
// return value.replace(/11/g,'2'),
}
})

未完待续…