赞
踩
button 按钮。
常用属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
size | string | default | 否 | 按钮的大小 |
type | string | default | 否 | 按钮的样式类型 |
plain | boolean | false | 否 | 按钮是否镂空,背景色透明 |
disabled | boolean | false | 否 | 是否禁用 |
loading | boolean | false | 否 | 名称前是否带 loading 图标 |
form-type | string | 否 | 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 | |
open-type | string | 否 | 微信开放能力 |
- <button size="default">default</button>
- <button size="mini">mini</button>
- <button size="default" type="primary">primary</button>
- <button size="default" type="default">default</button>
- <button size="default" type="warn">warn</button>
- <button size="default" plain="true">plain</button>
- <button size="default" disabled>disabled</button>
- <button size="default" loading>loading</button>
checkbox 多选项目。
常用属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 否 | checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value | |
disabled | boolean | false | 否 | 是否禁用 |
checked | boolean | false | 否 | 当前是否选中,可用来设置默认选中 |
color | string | #09BB07 | 否 | checkbox的颜色,同css的colo |
- <!-- 组件之间的文本是给用户看的,value是要提交的数据 -->
- <checkbox value="足球">足球</checkbox>
- <checkbox value="篮球" checked>篮球</checkbox>
- <checkbox value="羽毛球">羽毛球</checkbox>
- <checkbox value="禁用" disabled>禁用</checkbox>
- <checkbox value="指定颜色" color="#87cefa">指定颜色</checkbox>
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
常用属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
bindsubmit | eventhandle | 否 | 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''} | |
bindreset | eventhandle | 否 | 表单重置时会触发 reset 事件 |
输入框。该组件是原生组件,使用时请注意相关限制。
常用属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
value | string | 是 | 输入框的初始内容 | |
type | string | text | 否 | input 的类型 |
password | boolean | false | 否 | 是否是密码类型 |
placeholder | string | 是 | 输入框为空时占位符 | |
placeholder-style | string | 是 | 指定 placeholder 的样式 | |
placeholder-class | string | input-placeholder | 否 | 指定 placeholder 的样式类 |
disabled | boolean | false | 否 | 是否禁用 |
maxlength | number | 140 | 否 | 最大输入长度,设置为 -1 的时候不限制最大长度 |
cursor-spacing | number | 0 | 否 | 指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
auto-focus | boolean | false | 否 | (即将废弃,请直接使用 focus )自动聚焦,拉起键盘 |
focus | boolean | false | 否 | 获取焦点 |
- <!-- 一般输入框不需要定义value,单选框和复选框经常需要使用value -->
- <!-- 输入框输入的文本就是value的值,但是单选框和复选框需要指定value提交给服务器 -->
- 文本输入键盘:
- <input type="text" value="张三123"/>
- 数字输入键盘:
- <input type="number"/>
- 身份证输入键盘:
- <input type="idcard"/>
- 带小数点的数字键盘:
- <input type="digit"/>
- 密码安全输入键盘:
- <input type="safe-password"/>
- 密码输入键盘:
- <input type="text" password/>
- 带提示文本的输入框:
- <input type="text" placeholder="请输入用户名"/>
从底部弹起的滚动选择器。
- <view class="section">
- <view class="section__title">普通选择器</view>
- <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
- <view class="picker">
- 当前选择:{{array[index]}}
- </view>
- </picker>
- </view>
- <view class="section">
- <view class="section__title">多列选择器</view>
- <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
- <view class="picker">
- 当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
- </view>
- </picker>
- </view>
- <view class="section">
- <view class="section__title">时间选择器</view>
- <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
- <view class="picker">
- 当前选择: {{time}}
- </view>
- </picker>
- </view>
-
- <view class="section">
- <view class="section__title">日期选择器</view>
- <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
- <view class="picker">
- 当前选择: {{date}}
- </view>
- </picker>
- </view>
- <view class="section">
- <view class="section__title">省市区选择器</view>
- <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
- <view class="picker">
- 当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
- </view>
- </picker>
- </view>
- Page({
- data: {
- array: ['美国', '中国', '巴西', '日本'],
- objectArray: [
- {
- id: 0,
- name: '美国'
- },
- {
- id: 1,
- name: '中国'
- },
- {
- id: 2,
- name: '巴西'
- },
- {
- id: 3,
- name: '日本'
- }
- ],
- index: 0,
- multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
- objectMultiArray: [
- [
- {
- id: 0,
- name: '无脊柱动物'
- },
- {
- id: 1,
- name: '脊柱动物'
- }
- ], [
- {
- id: 0,
- name: '扁性动物'
- },
- {
- id: 1,
- name: '线形动物'
- },
- {
- id: 2,
- name: '环节动物'
- },
- {
- id: 3,
- name: '软体动物'
- },
- {
- id: 3,
- name: '节肢动物'
- }
- ], [
- {
- id: 0,
- name: '猪肉绦虫'
- },
- {
- id: 1,
- name: '吸血虫'
- }
- ]
- ],
- multiIndex: [0, 0, 0],
- date: '2016-09-01',
- time: '12:01',
- region: ['广东省', '广州市', '海珠区'],
- customItem: '全部'
- },
- bindPickerChange: function(e) {
- console.log('picker发送选择改变,携带值为', e.detail.value)
- this.setData({
- index: e.detail.value
- })
- },
- bindMultiPickerChange: function (e) {
- console.log('picker发送选择改变,携带值为', e.detail.value)
- this.setData({
- multiIndex: e.detail.value
- })
- },
- bindMultiPickerColumnChange: function (e) {
- console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
- var data = {
- multiArray: this.data.multiArray,
- multiIndex: this.data.multiIndex
- };
- data.multiIndex[e.detail.column] = e.detail.value;
- switch (e.detail.column) {
- case 0:
- switch (data.multiIndex[0]) {
- case 0:
- data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
- data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
- break;
- case 1:
- data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
- data.multiArray[2] = ['鲫鱼', '带鱼'];
- break;
- }
- data.multiIndex[1] = 0;
- data.multiIndex[2] = 0;
- break;
- case 1:
- switch (data.multiIndex[0]) {
- case 0:
- switch (data.multiIndex[1]) {
- case 0:
- data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
- break;
- case 1:
- data.multiArray[2] = ['蛔虫'];
- break;
- case 2:
- data.multiArray[2] = ['蚂蚁', '蚂蟥'];
- break;
- case 3:
- data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
- break;
- case 4:
- data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
- break;
- }
- break;
- case 1:
- switch (data.multiIndex[1]) {
- case 0:
- data.multiArray[2] = ['鲫鱼', '带鱼'];
- break;
- case 1:
- data.multiArray[2] = ['青蛙', '娃娃鱼'];
- break;
- case 2:
- data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
- break;
- }
- break;
- }
- data.multiIndex[2] = 0;
- break;
- }
- console.log(data.multiIndex);
- this.setData(data);
- },
- bindDateChange: function(e) {
- console.log('picker发送选择改变,携带值为', e.detail.value)
- this.setData({
- date: e.detail.value
- })
- },
- bindTimeChange: function(e) {
- console.log('picker发送选择改变,携带值为', e.detail.value)
- this.setData({
- time: e.detail.value
- })
- },
- bindRegionChange: function (e) {
- console.log('picker发送选择改变,携带值为', e.detail.value)
- this.setData({
- region: e.detail.value
- })
- }
- })
开关选择器。
常用属性如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
checked | boolean | false | 否 | 是否选中 |
disabled | boolean | false | 否 | 是否禁用 |
type | string | switch | 否 | 样式,有效值:switch, checkbox |
color | string | #04BE02 | 否 | switch 的颜色,同 css 的 color |
bindchange | eventhandle | 否 | checked 改变时触发 change 事件,event.detail={ value} |
- <switch >开关</switch>
- <switch checked>开关</switch>
- <switch disabled>开关</switch>
- <switch type="checkbox">开关</switch>
在app.json里面的pages里面定义"pages/login/login"
1、定义一个form组件,form组件是表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
2、定义view,给其添加id:inputView,在inputView里面定义文本框和密码框;无论是文本框还是密码框都依赖于input组件,input组件是输入框。该组件是原生组件,使用时请注意相关限制;
3、定义view,给其添加id:buttonView,在buttonView里面定义提交按钮和注册按钮;无论是什么按钮,都是依赖于button组件。
4、在buttonView里面添加一个view,用来承载忘记密码;
- <!-- 定义form组件 -->
- <form>
- <!-- 输入框区域 -->
- <view id="inputView">
- <!-- 文本框 -->
- <input type="text" placeholder="手机号/用户名"></input>
- <!-- 密码框 -->
- <input type="text" placeholder="密码" password></input>
- </view>
-
- <!-- 按钮区域 -->
- <view id="buttonView">
- <button>登录</button>
- <button>注册</button>
- <view>忘记密码</view>
- </view>
- </form>
1、给页面添加整体背景色;
2、给inputView添加白色背景,左右内边距;
3、给inputView里面的input设置高度,第一个input设置下边框;
4、给buttonView设置宽度、上外边距、左右居中;
5、给buttonView里面的第一个按钮,设置背景颜色、宽、高、字体大小、颜色;
6、给buttonView里面的第二个按钮,设置上下外边距、背景颜色、边框、文字颜色、大小;
7、给buttonView里面的子view设置文字大小、颜色、右对齐;
-
- /* 给页面设置整体背景色 */
- page{
- background: #F0EFF5;
- }
-
- /* 输入框区域样式 */
- #inputView{
- background: #fff;
- padding: 0 30rpx;
- }
-
- #inputView > input{
- height: 88rpx;
- }
-
- #inputView > input:nth-child(1){
- border-bottom: 1rpx solid #F1F1F1;
- }
-
- /* 按钮区域样式 */
- #buttonView{
- width: 690rpx;
- margin: 80rpx auto 0;
- }
-
- #buttonView > button{
- width: 690rpx;
- height: 88rpx;
- font-size: 36rpx;
- }
-
- #buttonView > button:nth-child(1){
- background: #87cefa;
- color: #fff;
- }
-
- #buttonView > button:nth-child(2){
- background: #fff;
- color: #87cefa;
- border: 2rpx solid #87cefa;
- margin: 36rpx 0;
- }
-
- #buttonView > view{
- font-size: 28rpx;
- color: #87cefa;
- text-align: right;
- }
什么时候(怎么样)提交数据?
当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
1、给form组件添加bindsubmit事件,在js里面定义对应的事件函数;
2、给button按钮添加form-type属性,值:submit,提交表单;
3、在事件函数里面获取要提交的数据;
3.1 需要给input组件添加name属性;
3.2 通过事件函数的事件对象获取值;
4、后续我们可以通过API发送请求;
- <!-- 定义form组件 -->
- <form bindsubmit="toLogin">
- <!-- 输入框区域 -->
- <view id="inputView">
- <!-- 文本框 -->
- <input type="text" placeholder="手机号/用户名" name="userName"></input>
- <!-- 密码框 -->
- <input type="text" placeholder="密码" password name="userPwd"></input>
- </view>
-
- <!-- 按钮区域 -->
- <view id="buttonView">
- <button form-type="submit">登录</button>
- <button>注册</button>
- <view>忘记密码</view>
- </view>
- </form>
- // 登录函数
- toLogin(e){
- // 获取要提交的用户名和密码,用变量存储
- var userName = e.detail.value.userName;
- var userPwd = e.detail.value.userPwd;
- console.log("要提交给服务器的用户名和密码是:",userName,userPwd);
- },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。