IoT砖家涂拉拉
IoT砖家涂拉拉

智能小程序小部件(Widget)表单组件属性说明+代码明细

在 Tuya MiniApp Tools 中，新建项目并选择小部件(Widget)对应模板即可自动创建小部件(Widget)项目。

button

按钮，用于强调操作并引导用户去点击。

属性说明

属性名 类型 默认值 必填 说明
size string default 否 按钮的大小
type string default 否 按钮的样式类型
plain boolean false 否 是否镂空
disabled boolean false 否 是否禁用
loading boolean false 否 是否带 loading 图标
form-type string 否 用于嵌在 form 组件中，控制 submit/reset
hover-class string ty-button-hover 否 点击状态的样式类
hover-start-time number 20 否 按住后多久出现点击态，单位毫秒
hover-stay-time number 70 否 手指松开后点击态保留时间，单位毫秒

size 取值范围

值 说明
default 默认大小
mini 小尺寸

type 取值范围

值 说明
primary 蓝色
default 白色
warn 红色

form-type 取值范围

值 说明
submit 提交表单
reset 重置表单

示例代码

TYML
JS
Page({
  data: {
    isPlain: true,
    buttonText: '点击',
    count: 1,
  },
  handleFirstBtnTap() {
    this.setData({
      count: ++this.data.count,
    });
  },
});

常见问题（FAQ）

button 如何修改样式？

可直接给button设置class,直接进行样式覆盖。(2.X 小程序版本)。 button 默认宽度为 100%。

checkbox

多选项目。

属性说明

属性名 类型 默认值 必填 说明
value string 否 checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value
disabled boolean false 否 是否禁用
checked boolean false 否 当前是否选中，可用来设置默认选中
color string #007AFF 否 checkbox 勾选符号的颜色，同 css 的 color

示例代码

TYML

常见问题（FAQ）

如何通过 js 更改 checkbox 的选中状态？

可以直接 通过 setData checkbox的 checked 属性来控制checkbox的选中状态。

checkbox-group 

多项选择器组，内部由多个 checkbox 组成。

属性说明

属性名 类型 默认值 必填 说明
name string 否 用于 
 组件，在表单提交事件中作为提交数据的 key 值
bind:change eventhandle 否 checkbox-group 中选中项发生改变时触发 change 事件，detail = {value:[选中的 checkbox 的 value 的数组]}

示例代码

TYML
JS
Page({
  data: {},
  checkboxChange(ev) {
    console.log(ev.detail.value);
  },
});

form 

表单。将组件内的用户输入的 input，textarea，checkbox-group，radio-group，picker，switch，slider 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性说明

属性名 类型 默认值 必填 说明
bind:submit eventhandle 否 携带 form 中的数据触发 submit 事件，event.detail 中可以取到 name 对应表单项的值
bind:reset eventhandle 否 表单重置时会触发 reset 事件

示例代码

TYML

  
    
      
        switch
        
      
 
      
        slider
        
      
 
      
        checkbox
        
          
            选项一
          
          
            选项二
          
        
      
 
      
        radio
        
          
            单选一
          
          
            单选二
          
        
      
 
      
        input
        
          
        
      
 
      
        textarea
        
          
        
      
 
      
        
          
        
        
          
        
      
    
 
    
      
        {{item.name}}: 
        {{item.value}}
JS
Page({
  data: {
    resultContent: '',
    resultData: [
      {
        name: 'switch',
        value: '',
      },
      {
        name: 'slider',
        value: '',
      },
      {
        name: 'CheckboxGroup',
        value: '',
      },
      {
        name: 'RadioGroup',
        value: '',
      },
      {
        name: 'input',
        value: '',
      },
      {
        name: 'textarea',
        value: '',
      },
    ],
  },
 
  onLoad: () => {},
 
  handleSubmit(ev) {
    const value = ev.detail.value;
    const resultData = [];
    for (let name in value) {
      resultData.push({
        name,
        value: value[name],
      });
    }
    this.setData({
      resultData,
    });
  },
 
  handleReset(ev) {
    const value = ev.detail.value;
    const resultData = [];
    for (let name in value) {
      resultData.push({
        name,
        value: value[name],
      });
    }
    this.setData({
      resultData,
    });
  },
 
  handleTextareaInput(ev) {
    console.log('textarea input event ', ev);
  },
});

常见问题（FAQ）

小程序 form 表单可以静默触发吗？

不支持，需要用户点击触发。

input 

输入框组件，用于键盘交互。

属性说明

属性名 类型 默认值 必填 说明 备注
value string '' 是 输入框的初始值。如果想在键盘输入时改变 input 框的值，可以直接在 bindinput 回调里 return 指定值
type string text 否 input 的类型
password boolean false 否 是否是密码类型
placeholder string 是 输入框为空时占位字符
placeholderStyle string 否 指定 placeholder 的样式
disabled boolean false 否 是否禁用
maxlength number 140 否 最大输入长度，设置为 -1 的时候不限制最大长度
confirm-type string done 否 设置键盘右下角按钮的文字, 支持 send(发送) search（搜索） next（下一项）go（前往）done（完成），具体右下角按钮文字以输入法显示为准 iOS 仅 13.1 以上版本支持
bind:input eventhandle 是 键盘输入时触发，event.detail = { value }
bind:focus eventhandle 是 输入框聚焦时触发，event.detail = { value }
bind:blur eventhandle 是 输入框失去焦点时触发，event.detail = {value: value}
bind:confirm eventhandle 是 ios 点击换行按钮时触发，安卓点击完成按钮时触发，event.detail = { value }

type 的合法值

值 说明 备注
text 文本输入键盘
number 数字输入键盘

示例代码

TYML

  控制最大输入长度的input
  
    
  


  实时获取输入值：{{inputValue}}
  
    
  


  数字输入的input
  
    
  


  密码输入的input
JS
Page({
  data: {
    inputValue: '',
    placeholder: '最大输入长度为10',
    placeholderStyle: 'color:green',
  },
  bindKeyInput: function (e) {
    console.log('demo bindKeyInput', e.detail.value, e.detail);
    this.setData({
      inputValue: e.detail.value,
    });
  },
  bindKeyFocus: function (e) {
    console.log('demo bindKeyFocus', e.detail.value, e.detail);
  },
  bindKeyBlur: function (e) {
    console.log('demo bindKeyBlur', e.detail.value, e.detail);
  },
});
TYSS
.page-section {
  width: 100%;
  margin-bottom: 20px;
}
.page-section-title {
  color: rgba(0, 0, 0, 0.9);
}
.tyui-cell {
  font-size: 17px;
  padding: 0 16px;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  margin-top: 10px;
}
.tyui-input {
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 17px;
}

常见问题（FAQ）

输入框是否支持点击事件，比如 tap、touch？

支持，所有的组件都支持 tap、touch 事件。

input 如何用 js 代码清空数据？

通过setData 给属性 value 设置为空，需要保证setData数值有变化。

input 内容跳动、延迟如何处理？

可以使用防抖函数。避免 bind:input的时候频繁更新。

iOS 在输入中文的时候出现丢焦情况，怎么办？

iOS的input在bind:Input中执行setData会导致在输入中文的时候丢焦。① 可对setData执行防抖操作 ②bind:Input的时候将数据存储在this下，避免一直 触发setData操作。

label

用来改进表单组件的可用性。

使用 for 属性找到对应的 id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 checkbox, radio, switch。

标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。 将一个  和一个  元素匹配在一起，你需要给  一个 id 属性。而  需要一个 for 属性，其值和  的 id 一样。 另外，你也可以将  直接放在  里，此时则不需要 for 和 id 属性，联系已隐含存在。

属性说明

属性名 类型 默认值 必填 说明
for string 否 绑定控件的 id

示例代码

TYML

picker

从底部弹起的滚动选择器，支持四种选择器，通过 mode 属性来设置，分别是 selector 普通选择器，multiSelector 多列选择器，time 时间选择器，date 日期选择器，默认是 selector 普通选择器。

属性说明

属性名 类型 默认值 必填 说明
mode string selector 否 选择器类型
disabled boolean false 否 是否禁用
confirm-text string 确定 否 确定按钮的文字
cancel-text string 取消 否 取消按钮的文字
bind:cancel eventhandle 否 取消选择时触发

mode 的合法值

值 说明
selector 普通选择器
multiSelector 多列选择器
time 时间选择器
date 日期选择器

除了上述通用的属性，对于不同的 mode，picker拥有不同的属性，见下方。

普通选择器：mode = selector

属性名 类型 默认值 说明
range array/object array [] mode 为 selector 或 multiSelector 时，range 有效
range-key string 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value array [] 表示选择了 range 中的第几个（下标从 0 开始）
bind:change eventhandle value 改变时触发 change 事件，event.detail = {value}

多列选择器：mode = multiSelector

属性名 类型 默认值 说明
range array/object array [] mode 为 selector 或 multiSelector 时，range 有效
range-key string 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value array [] 表示选择了 range 中的第几个（下标从 0 开始）
bind:change eventhandle value 改变时触发 change 事件，event.detail = {value}
bind:columnchange eventhandle 列改变时触发

时间选择器：mode = time

属性名 类型 默认值 说明
value string 表示选中的时间，格式为"hh:mm"
start string 表示有效时间范围的开始，字符串格式为"hh:mm"
end string 表示有效时间范围的结束，字符串格式为"hh:mm"
bind:change eventhandle value 改变时触发 change 事件，event.detail = {value}

时间选择器：mode = date

属性名 类型 默认值 说明
value string 当天 表示选中的日期，格式为"YYYY-MM-DD"
start string 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end string 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields string day 有效值 year,month,day，表示选择器的粒度
bind:change eventhandle value 改变时触发 change 事件，event.detail = {value}

fields 有效值：

值 说明
year 选择器粒度为年
month 选择器粒度为月份
day 选择器粒度为天

示例代码

TYML

  普通选择器
  
    
      当前选择：{{array[index]}}
    
  


  普通objectArray选择器
  
    
      当前选择：{{array[index]}}
    
  


  多列选择器
  
    
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    
  



  多列ObjectArray选择器
  
    
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    
  


  时间选择器
  
    
      当前选择: {{time}}
    
  

 

  日期选择器
  
    
      当前选择: {{date}}
JS
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: 4,
          name: '节肢动物',
        },
      ],
      [
        {
          id: 0,
          name: '猪肉绦虫',
        },
        {
          id: 1,
          name: '吸血虫',
        },
      ],
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    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;
    }
    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,
    });
  },
});

picker-view

嵌入页面的滚动选择器。其中只可放置 picker-view-column 组件，其它节点不会显示。

属性说明

属性名 类型 默认值 必填 说明
value Array 否 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style string 否 设置选择器中间选中框的样式
mask-style string 否 设置蒙层的样式
bind:change eventhandle 否 滚动选择时触发 change 事件，event.detail = {value}；value 为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）
bind:pickstart eventhandle 否 当滚动选择开始时候触发事件
bind:pickend eventhandle 否 当滚动选择结束时候触发事件

picker-view-column

滚动选择器子项。需要配合  使用, 仅可放置于 picker-view 中，其高度会自动设置成与 picker-view 的选中框的高度一致

示例代码

请参考 picker-view 组件。

radio

单选项目。

属性说明

属性名 类型 默认值 必填 说明
value string 否 radio 标识。当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value
checked boolean false 否 当前是否选中
disabled boolean false 否 是否禁用
color string #007AFF 否 radio 的颜色，同 css 的 color

radio-group

单项选择器，内部由多个 radio 组成。

属性说明

属性名 类型 默认值 必填 说明
name string 否 用于 
 组件，在表单提交事件中作为提交数据的 key 值
bind:change eventhandle 否 radio-group 中选中项发生改变时触发 change 事件，detail = {value:[选中的 radio 的 value 的数组]}

示例代码

TYML
JS
Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'FRA', value: '法国' },
    ],
  },
  radioChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value);
  },
});

slider

滑动选择器。

属性说明

属性名 类型 默认值 必填 说明
min number 0 否 最小值
max number 100 否 最大值
step number 1 否 步长，取值必须大于 0，并且可被(max - min)整除
disabled boolean false 否 是否禁用
value number 0 否 当前取值
active-color color #007aff 否 已选择的颜色
background-color color rgba(0,0,0,.2) 否 背景条的颜色
block-size number 28 否 滑块的大小，取值范围为 12 - 28
block-color color #ffffff 否 滑块的颜色
show-value boolean false 否 是否显示当前 value
bind:change eventhandle 否 完成一次拖动后触发的事件，event.detail = {value}
bindchanging eventhandle 否 拖动过程中触发的事件，event.detail = {value}

示例代码

TYML

	
		
			基础
			
				
			
		
 
		
			设置step
			
				
			
		
 
		
			显示当前value
			
				
			
		
 
		
			设置最小/最大值
JS
var pageData = {};
for (var i = 1; i < 5; ++i) {
  (function (index) {
    pageData[`slider${index}change`] = function (e) {
      console.log(`slider${index}发生change事件，携带值为`, e.detail.value);
    };
  })(i);
}
Page(pageData);
TYSS
.section {
  margin-bottom: 30px;
}
.section__title {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

switch

开关选择器。

属性说明

属性名 类型 默认值 必填 说明
checked boolean false 否 是否选中
disabled boolean false 否 是否禁用
type string switch 否 样式，有效值：switch, checkbox
color color #007AFF 否 switch 的颜色，同 css 的 color
bind:change eventhandle 否 checked 改变时触发 change 事件，event.detail={ value:checked }

示例代码

TYML

  
    默认选中：
    
  
  
    disabled：
    
  
  
    type：
    
  
  
    color:

textarea

多行文本输入框。

属性说明

属性名 类型 默认值 必填 说明 备注
value string -- 否 输入框的内容
placeholder string -- 否 输入框为空时占位符
placeholder-style string -- 否 指定 placeholder 的样式
disabled boolean false 否 是否禁用
maxlength number -1 否 最大输入长度，设置为 -1 的时候不限制最大长度
auto-height boolean false 否 是否自动增高，设置 auto-height 时，设置 height 样式不生效
bind:input eventhandler -- 否 键盘输入时触发，e.detail={value}
bind:focus eventhandler -- 否 输入框聚焦时触发，event.detail={value}
bind:blur eventhandler -- 否 输入框失去焦点时触发，event.detail={value}
bind:linechange eventhandler -- 否 输入框行数变化时调用，event.detail = {height: 0, lineCount: 0}

示例代码

TYML

  
    输入区域高度自适应，不会出现滚动条