一、button
1.属性列表
size 按钮大小 String 默认 default
有效值: default、 mini
type 按钮的样式类型 String default
有效值:primary、default、warn
form-type 用于<form/>组件,点击分别会触发<form/>组件的submit/reset事件;
有效值:submit、reset
plain 按钮是否镂空,背景色透明 默认false
disabled 是否禁用 false
loading 名称前是否带有loading图标 false
open-type 微信开发能力 String
有效值:
contact 打开客服会话
share 触发用户转发
getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息
launchApp 可以从bindgetphonenumber回调中获取到用户信息
openSetting 可以从bindgetphonenumber回调中获取到用户信息
hover-class 指定按钮按下去的样式类,hover-class=‘none’时,没有点击态效果 默认button-hover
...
2.tips
button-hover 默认 {background-color: rgba(0,0,0,0.1);opacity:0.7}
在bindgetphonenumber 等返回加密信息的回调中 调用wx.login登录,可能会刷新登录状态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态
3.eg:
<button type="warn" size="mini">按钮</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
...
二、checkbox - 多项选择器,内部由多个checkbox组成
1.属性
checkbox-group:
bindchange <checkbox-group/>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}
checkbox:
value <checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带 <checkbox/> 的 value
disabled 是否禁用 默认false
checked 当前是否选中,可用来设置默认选中 默认false
color checkbox颜色
2.eg
xx.wxml
<text>多项选择</text>
<checkbox-group bindchange="checkboxChange">
<view class='checkbox'>
<label class=' checkBox' wx:for="{{coutry}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</label>
</view>
</checkbox-group>
xx.js
Page({
data: {
coutry:[
{ name: 'USA', value: '美国' },
{ name: 'CHN', value: '中国', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英国' },
{ name: 'TUR', value: '法国' },
]
},
checkboxchange: function(e){
console.log('checkbox发生change事件,携带value值为:',e.detail.value)
}
})
三、form
表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key
四、input
1.属性
type input的类型 默认‘text’
有效值: text number idcard(身份证输入键盘) digit(带小数点的数字键盘)
confirm-type 设置键盘右下角按钮的文字 默认‘done’
有效值: send-发送 search-搜索 next-下一个 go-前往 done-完成
value 输入框的初始内容
password 是否是密码类型 默认false
placeholder 输入框为空时的占位符
placeholder-style 指定placeholder的样式
placeholder-class 指定placeholder的样式类
maxlength 最大输入长度 140 设置为-1时不限制最大长度
cursor-spacing 指定光标与键盘的距离单位px
focus 获取焦点 false
confirm-hold 点击键盘右下角按钮时,是否保持键盘不收起 默认false
cursor 指定focus时的光标位置
adjust-position 键盘弹起时,是否自动上推页面 默认true
bindinput 键盘输入时,触发input事件
bindfocus 输入框聚焦时触发
bindblur 输入框失去焦点时触发
bindconfirm 点击完成按钮时触发
五、label
用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>
六、滚动选择器
从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分:
mode = selector 普通选择器 - 默认
mode = multiSelecto 多列选择器
mode = time 时间选择器
mode = date 日期选择器
mode = region 省市区选择器
1.picker - 嵌入页面的滚动选择器
2.picker-view - 嵌入页面的滚动选择器
其中只可放置<picker-view-column/>组件,其他节点不会显示;
picker-view-column:
仅可放置于<picker-view />中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
七、radio - 单项选择器,内部由多个
八、slider - 滑动选择器
九、switch - 开关选择器
十、textarea - 多行输入框
bug: 微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。
tip:
textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。
不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
textarea 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。
css 动画对 textarea 组件无效。