微信小程序学习(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'),
  }
})

未完待续…

展开阅读全文

没有更多推荐了,返回首页