1.button 按钮组件
组件的属性:
1)size属性
- default 默认值 宽度与手机屏幕宽度相同
- mini 迷你型,按钮尺寸、字号都比普通按钮小
2)type属性
- primary 绿色
- default 灰白色
- warn 红色
3)form-type属性 具体功能需配合form组件一起使用生效
- submit 提交表单
- reset 重置表单
4)open-type属性
相关属性:
2.checkbox 复选框组件,需和<checkgroup>多项选择器组件配合使用
<checkgroup>组件的属性:
<checkbox>组件的属性:
3.input 输入框组件
<input>组件属性:
1)type属性:
- text 文本输入键盘
- number 数字输入键盘
- idcard 身份证输入键盘
- digit 带小数点的数字键盘
2)comfirm-type属性:(设置键盘右下角按钮文字)
- send 显示“发送”
- search 显示“搜索”
- next “下一个”
- go “前往”
- done “完成”
ps:最终表现与手机输入法本身的实现有关,部分输入法可能不支持或不完全支持
4.label 改进表单组件的可用性,用for属性找到对应的id 或者将控件放在该标签下,单击时会触发对应的控件
<label>组件的属性:
ps:目前可绑定<button>、<checkbox>、<radio>、<switch>
示例:
ps:for的优先级高于内部控件,当内部有多个控件的时候默认触发第一个控件
5.form 表单组件
<form>组件允许提交的内部表单组件值如下:
<switch>:开关选择器 <input>:输入框组件 <checkbox>:多项选择器 <slider>:滑动选择器 <radio>:单项选择器
<picker>:滚动选择器
<form>组件的属性:
6.picker 从底部弹起的滚动选择器,根据mode属性值不同共支持5种选择器
1)普通选择器 默认 mode='selector'
<picker mode='selector'>组件属性:
示例:
<!--wxml-->
<picker mode="selector" range="{{selectorItems}}" bindchange="selectorChange">
<view>当前选择:{{selector}}</view>
</picker>
//js
data: {
selectorItems:['苹果','香蕉','葡萄']
},
selectorChange:function(e){
let i = e.detail.value //获取数组下标
let value = this.data.selectorItems[i] //获取该下标对应项的值
console.log(value)
this.setData({
selector:value
})
}
2)多列选择器 mode="multiSelector"
<picker mode="multiSelector">组件属性
示例:
<!--wxml-->
<picker mode="multiSelector" range="{{multiselectorItems}}" bindchange="multiselectorChange">
<view>当前选择:{{multiSelector}}</view>
</picker>
//js
data: {
multiselectorItems:[['罗宋汤','蘑菇汤'],['牛排','猪排','鱼排'],['冰淇淋','鸡蛋布丁']]
},
multiselectorChange:function(e){
let arrayIndex = e.detail.value //获得选项的数组下标
let array = this.data.multiselectorItems //获得选项数组
let value = new Array()
for(let i=0;i<arrayIndex.length;i++){
let k=arrayIndex[i]; //第i个数组的元素下标
let v=array[i][k]; //获得第i个数组的元素值
value.push(v);
}
this.setData({
multiSelector:value
})
}
3)时间选择器 mode="time"
<picker mode="time">组件的属性
示例:
<!--wxml-->
<picker mode="time" bindchange="timeChange">
<view>当前选择:{{time}}</view>
</picker>
//js
timeChange:function(e){
let value = e.detail.value //获得选择的时间
this.setData({
time:value
})
}
4)日期选择器 mode="date"
<picker mode="date">组件的属性:
fileds属性:year month day
示例:
<!--wxml-->
<picker mode="date" bindchange="dateChange">
<view>当前选择:{{date}}</view>
</picker>
//js
dateChange:function(e){
let value = e.detail.value //获得选择的日期
this.setData({
date:value
})
}
5)省市区选择器 mode="region"
<picker mode="region">组件的属性:
示例:
<!--wxml-->
<picker mode="region" bindchange="regionChange">
<view>当前选择:{{region}}</view>
</picker>
//js
regionChange:function(e){
let value = e.detail.value //获得选择的省市区,是一个数组
this.setData({
region:value
})
},
7.picker-view 嵌入页面的滚动选择器
<picker-view>组件属性:
ps:在其中要放置1~N个<pick-view-column>来表示对应列选项,<pick-view-column>仅可放置在<pick-view>中,其子节点的高度会自动设置成与<pick-view>选中框的高度一致。
示例:
<!--wxml-->
<view class="title">表单组件的简单应用</view>
<view class="demo-box">
<view class="box-title">今日菜单</view>
<view class="box-title">{{menu}}</view>
<picker-view value="{{value}}" indicator-style="height:50px;" bindchange="pickerviewchange">
<picker-view-column>
<view class="col" wx:for="{{soup}}" wx:key="s{{index}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="col" wx:for="{{maincourse}}" wx:key="m{{index}}">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="col" wx:for="{{dessert}}" wx:key="d{{index}}">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
/*wxss*/
picker-view{
width: 100%;
height: 300px;
}
.col{
line-height: 50px;
}
.box-title{
text-align: center;
font-size: 18px;
font-weight: bold;
}
//js
data: {
soup:['奶油蘑菇汤','罗宋汤','牛肉清汤'],
maincourse:['煎小牛肉卷','传统烤羊排','清煮三文鱼'],
dessert:['坚果冰淇淋','焦糖布丁','奶酪蛋糕'],
value:[1,1,1], //默认每个选项的数组下标
menu:[]
},
pickerviewchange:function(e){
let v=e.detail.value; //获取每个选项的数组下标
let menu=[];
menu.push(this.data.soup[v[0]]);
console.log(menu)
menu.push(this.data.maincourse[v[1]]);
menu.push(this.data.dessert[v[2]]);
console.log(menu)
this.setData({
menu:menu
})
},
8.radio 单选框组件,常与<radio-group>组件配合使用
<radio-group>组件属性:
<radio>组件属性:
9.slider 滑动条组件
<slider>组件属性:
10.switch 开关选择器
<switch>组件属性:
11.textarea 文本框组件,多行输入框
<textarea>组件属性: