小程序学习之小程序组件（三）表单组件

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>//jsdata: {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>组件属性：

小程序学习之小程序组件（三）表单组件相关推荐

小程序七：组件之表单组件
button 按钮组件. 属性名类型默认值说明 size String default 有效值default, mini type String default 按钮的样式类型,有效值prima ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
微信小程序之自定义表单组件(radio)
背景: 最近在做项目的时候遇到一个问题,那就是微信的官方表单组件的可扩展性不强,无法达到设计稿所要求的效果,所以想到了用自定义组件的方法自定义一个表单组件. (自定义组件其实往往用在需要复用的地方,比 ...
关于微信小程序中uView中通过packer选择器修改表单无法触发form组件的表单验证的问题
uView中使用form表单组件,如果form-item为正常的input组件,在输入和修改form-item绑定的变量的时候,都会触发form表单的表单验证事件但是如果form-item中不是in ...
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
很棒的 Django 应用程序、项目和资源的精选表单
目录管理界面分析资产管理验证授权博客管理样板缓存兼容性客户关系管理仪表盘数据科学数据库调试电子邮件字段文件传输形式地理信息系统图像处理进出口迁移移动支持 ...
extjs 提交表单给php,JavaScript_Extjs学习笔记之二初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
《uni-app》表单组件-form表单
本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组件-form表单 ...
《uni-app》表单组件-Checkbox组件
本文分享的checkbox组件为uni-app的内置组件checkbox,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多-没有本质上的区别- <uni-app>表单组 ...
Element-UI组件之表单Form
Element-UI组件之表单Form Radio 单选框基础用法禁用状态单选框组按钮样式带有边框 Checkbox 多选框基础用法禁用状态多选框组 indeterminate 状态 ...

小程序学习之小程序组件（三）表单组件

小程序学习之小程序组件（三）表单组件相关推荐

最新文章

热门文章