微信小程序（六）

#表单组件（一）
##wxml页面代码：
```html
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>
 
  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
  </form>
```
##js页面代码：
```javascript
Page({
  formSubmit: function(e) {    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function() {    console.log('form发生了reset事件')
  }
})
```

<p style="text-align: center;"><span style="font-size: 24px;">botton组件详解</span></p><table align="center"><tbody><tr class="firstRow"><td width="396" valign="middle" style="word-break: break-all; background-color: rgb(187, 187, 187); border-width: 1px; border-style: solid;" align="center">属性</td><td width="396" valign="middle" style="word-break: break-all; background-color: rgb(187, 187, 187); border-width: 1px; border-style: solid;" align="center">属性值and说明</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">size</td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">有效值：default, mini</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">type</td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">按钮的样式类型，有效值 primary（绿）,default(半透), warn(红)</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">plain</td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">按钮是否镂空，背景色透明，直接用plain</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">disabled</td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">是否禁用</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">loading  </td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">名称前是否带 loading 图标</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">hover-class</td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">指定按钮按下去的样式类,当 hover-class="none" 时，没有点击态效果</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">hover-start-time </td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">按住后多久出现点击态，单位毫秒</td></tr><tr><td width="396" valign="middle" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">hover-stay-time </td><td width="396" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"><p>手指松开后点击态保留hover的时间，单位毫秒</p></td></tr><tr><td valign="middle" colspan="1" rowspan="1" style="word-break: break-all; border-width: 1px; border-style: solid;" align="center">form-type</td><td valign="top" colspan="1" rowspan="1" style="word-break: break-all; border-width: 1px; border-style: solid;">有效值：submit, reset，用于 <form/> 组件，点击分别会触发 submit/reset 事件</td></tr></tbody></table><p><br/></p>

##wxml页面代码：
```html
<button size="mini" >mini按钮</button>
<button type="default" >默认样式</button>
<button type="primary" >基本按钮</button>
<button type="warn" >警示按钮</button>
<button plain >透明按钮</button>
<button disabled="true">禁用按钮</button>
<button loading="true">有加载图标的按钮</button>
<button hover-class="ho">有点击效果(变色)</button>
<button hover-class="ho" hover-start-time="5000">
点击后五秒出现效果(变色)</button>
<button hover-stay-time="5000">手指松开后点击态保留hover的时间</button>
js页面代码：
Page({
sub:function(e){
    //e.detail.value获取表单元素
    console.log("提交成功：",e.detail.value);
}
})
```

##js页面代码：
```javascript
Page({
sub:function(e){
    //e.detail.value获取表单元素
    console.log("提交成功：",e.detail.value);
}
})
```

#checkbox多选框组件详解
##wxml页面代码：
```html

<form bindsubmit="sub">
  
  <input type="text" name="textData"/>
  
  <checkbox-group bindchange="checkboxChange">
  
  <label class="checkbox" wx:for="{{country}}">
   <view>
   <checkbox value="{{item.name}}" checked="{{item.checked}}"/>       {{item.value}}
  </view>
  </label>
  </checkbox-group>
  <button form-type="submit">提交按钮</button>
</form>
```

##js页面代码：
```javascript
Page({
  data: {
    country: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
sub:function(e){
    //e.detail.value获取表单元素
    console.log("提交成功：",e.detail.value);
},
checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})
```

#input组件详解
##xwml页面:
```html
<!—value属性             输入框的初始内容—>
<view>
<input value="我是输入框中默认的值" />
</view>
<!—disabled            是否禁用，true或者false—>
<view>
<input disabled="true" placeholder="我是被禁用的input输入框" />
</view>
<!—focus           获取焦点，true或者false，使用手机真实环境才有效果—>
<view class="section">
  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  </view>
</view>
<!—maxlength            最大输入长度，设置为 -1 的时候不限制最大长度，不设置则最大输入长度为140—>
<view class="section">
  <input maxlength="10" placeholder="最大输入长度10" />
</view>
<!—bindinput属性（js）     当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容—>
<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 bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<!—password属性        输入的内容将会隐藏—>
<view class="section">
  <input password type="number"   placeholder="我是数字密码输入框"/>
</view>
<view class="section">
  <input password type="text"  placeholder="我是文本密码输入框" />
</view>
<!—type属性            有效值：text, number, idcard, digit，并不是说如果是number类型的type就不能输入字符串，只是说调用的键盘是数字键盘—>
<view class="section">
  <input type="digit" placeholder="带小数点的数字键盘" />
</view>
<view class="section">
  <input type="idcard" placeholder="身份证输入键盘" />
</view>
<!—placeholder属性         对输入框的一个说明，当获取焦点时消失
placeholder-style属性   对placeholder的值在xwml页面进行css渲染
placeholder-classs属性  对placeholder的值在xwss页面进行css渲染—>
<view class="section">
  <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
<view class="section">
  <input placeholder-class="red-class" placeholder="占位符字体是大号红色" />
</view>
<!—
bindfocus属性（js）          输入框聚焦时触发，event.detail = {value: value}
bindblur属性（js）        输入框失去焦点时触发，event.detail = {value: value}
—>
<view class="section">
  <input bindfocus="focusEvent" bindblur="blurEvent" placeholder="bindfocus事件和bindblur事件" />
</view>
<!—bindconfirm              点击完成按钮时触发，event.detail = {value: value}—>
<view class="section">
  <input bindconfirm="confirmEvent" placeholder="bindconfirm事件" />
</view>
```
##js页面代码：
```javascript
Page({
  data: {
    country: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ],
    focus: false,
    inputValue: ''
  },
  sub: function (e) {
    //e.detail.value获取表单元素
    console.log("提交成功：", e.detail.value);
  },
  reset: function () {
    console.log('form发生了reset事件')
  },
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  },
  bindButtonTap: function () {
    this.setData({
      focus: true
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value
    var pos = e.detail.cursor
    if (pos != -1) {
      //光标在中间
      var 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'),
  },
  bindHideKeyboard: function (e) {
    if (e.detail.value === '123') {
      //收起键盘
      wx.hideKeyboard()
    }
  },
  focusEvent:function(e){
        console.log("你触发了焦点聚焦事件,携带value值为："+e.detail.value);
  },
  blurEvent:function(e){
        console.log("你触发了失去焦点事件,携带value值为："+e.detail.value);
  },
  confirmEvent:function(){
        console.log("你触发了提交事件");
  },
})
```
##xwss页面代码
```css
.red-class{
    color: red;
    font-size: 20px
}
```

微信小程序（六）

添加新评论

最新文章

最新回复

标签

归档

友情链接