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

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

button

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

属性说明 属性名类型默认值必填说明sizestringdefault否按钮的大小typestringdefault否按钮的样式类型plainbooleanfalse否是否镂空disabledbooleanfalse否是否禁用loadingbooleanfalse否是否带 loading 图标form-typestring否用于嵌在 form 组件中，控制 submit/resethover-classstringty-button-hover否点击状态的样式类hover-start-timenumber20否按住后多久出现点击态，单位毫秒hover-stay-timenumber70否手指松开后点击态保留时间，单位毫秒

size 取值范围

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

type 取值范围

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

form-type 取值范围

值说明submit提交表单reset重置表单 示例代码 TYML <view class="button-page"> <button type="primary" bind:tap="handleFirstBtnTap">主操作</button> <button type="primary" loading="true">主操作</button> <button type="primary" disabled="true">主操作</button> <button type="default">次要操作</button> <button type="default" disabled="true">次要操作</button> <button type="warn">警告操作</button> <button type="warn" disabled="true">警告操作</button> <button type="primary" plain="true">按钮</button> <button type="primary" disabled="true" plain="true">不可点击按钮</button> <button type="default" plain="true">按钮</button> <button type="default" disabled="true" plain="true">按钮</button> <view class="button-sp-area"> <button class="mini-btn" type="primary" size="mini">按钮</button> <button class="mini-btn" type="default" size="mini">按钮</button> <button class="mini-btn" type="warn" size="mini">按钮</button> </view> </view> JS Page({ data: { isPlain: true, buttonText: '点击', count: 1, }, handleFirstBtnTap() { this.setData({ count: ++this.data.count, }); }, }); 常见问题（FAQ）

button 如何修改样式？

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

checkbox

多选项目。

属性说明 属性名类型默认值必填说明valuestring否checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 valuedisabledbooleanfalse否是否禁用checkedbooleanfalse否当前是否选中，可用来设置默认选中colorstring#007AFF否checkbox 勾选符号的颜色，同 css 的 color 示例代码 TYML <label> <checkbox class="checkItem" value="value1" disabled="true"></checkbox>选项 不可选 </label> 常见问题（FAQ）

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

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

checkbox-group 

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

属性说明 属性名类型默认值必填说明namestring否用于 <form /> 组件，在表单提交事件中作为提交数据的 key 值bind:changeeventhandle否checkbox-group 中选中项发生改变时触发 change 事件，detail = {value:[选中的 checkbox 的 value 的数组]} 示例代码 TYML <checkbox-group bind:change="checkboxChange"> <view> <label> <checkbox class="checkItem" value="value1" disabled="true"></checkbox>选项1 不可选 </label> </view> <view> <label> <checkbox class="checkItem" value="value2" ></checkbox>选项2 </label> </view> <view> <label> <checkbox class="checkItem" value="value3"></checkbox>选项3 </label> </view> <view> <label> <checkbox class="checkItem" value="value4" checked="true"></checkbox>选项4 默认选中 </label> </view> </checkbox-group> 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:submiteventhandle否携带 form 中的数据触发 submit 事件，event.detail 中可以取到 name 对应表单项的值bind:reseteventhandle否表单重置时会触发 reset 事件 示例代码 TYML <view class="form-page"> <view class="page-section"> <form bind:submit="handleSubmit" bind:reset="handleReset" id="formSelf"> <view class="item-wrap"> <text class="page-section-title section-title">switch</text> <switch name="switch"></switch> </view> <view class="item-wrap"> <text class="page-section-title section-title">slider</text> <slider name="slider" show-value="{{true}}" value="{{42}}"></slider> </view> <view class="item-wrap"> <text class="page-section-title section-title">checkbox</text> <checkbox-group name="CheckboxGroup"> <checkbox class="radio" value="选项一"> <text class="text">选项一</text> </checkbox> <checkbox class="radio" value="选项二"> <text class="text">选项二</text> </checkbox> </checkbox-group> </view> <view class="item-wrap"> <text class="page-section-title section-title">radio</text> <radio-group name="RadioGroup"> <radio class="radio" value="单选一"> <text class="text">单选一</text> </radio> <radio class="radio" value="单选二"> <text class="text">单选二</text> </radio> </radio-group> </view> <view class="item-wrap"> <text class=" page-section-title section-title">input</text> <view class="tyui-cell"> <input class="tyui-input" name="input" placeholder="请输入" /> </view> </view> <view class="item-wrap"> <text class="page-section-title section-title">textarea</text> <view class="textarea-wrap"> <textarea name="textarea" class="txtarea-box" bind:input="handleTextareaInput"></textarea> </view> </view> <view class="btns-wrap"> <view class="btn-line"> <button form-type="submit" id="triggerBtn" data-info="提交的按钮" type="primary" class="submit-btn">提交</button> </view> <view class="btn-line"> <button form-type="reset" id="resetBtn" data-info="reset的按钮" class="reset-btn">重置</button> </view> </view> </form> <view class="result-wrap"> <view ty:for="{{resultData}}" ty:key="{{item.name}}" class="result-item"> <text class="result-name">{{item.name}}: </text> <text>{{item.value}}</text> </view> </view> </view> </view> 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 

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

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

type 的合法值

值说明备注text文本输入键盘number数字输入键盘 示例代码 TYML <view class="page-section"> <view class="page-section-title l-r-padding">控制最大输入长度的input</view> <view class="tyui-cell"> <input class="tyui-input" maxlength="{{10}}" placeholder="{{placeholder}}" /> </view> </view> <view class="page-section"> <view class="page-section-title l-r-padding">实时获取输入值：{{inputValue}}</view> <view class="tyui-cell"> <input class="tyui-input" bind:input="bindKeyInput" bind:blur="bindKeyBlur" bind:focus="bindKeyFocus" placeholder="输入同步到view中"/> </view> </view> <view class="page-section"> <view class="page-section-title l-r-padding">数字输入的input</view> <view class="tyui-cell"> <input class="tyui-input" type="number" placeholder="这是一个数字输入框" /> </view> </view> <view class="page-section"> <view class="page-section-title l-r-padding">密码输入的input</view> <view class="tyui-cell"> <input class="tyui-input" password="{{true}}" type="text" placeholder="这是一个密码输入框" /> </view> </view> 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。

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

属性说明 属性名类型默认值必填说明forstring否绑定控件的 id 示例代码 TYML <label class="flex-algin-center"> <checkbox value="test"></checkbox> <text class="label-1__text">选项1</text> </label>

picker

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

属性说明 属性名类型默认值必填说明modestringselector否选择器类型disabledbooleanfalse否是否禁用confirm-textstring确定否确定按钮的文字cancel-textstring取消否取消按钮的文字bind:canceleventhandle否取消选择时触发

mode 的合法值

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

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

普通选择器：mode = selector

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

多列选择器：mode = multiSelector

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

时间选择器：mode = time

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

时间选择器：mode = date

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

fields 有效值：

值说明year选择器粒度为年month选择器粒度为月份day选择器粒度为天 示例代码 TYML <view class="section"> <text class="page__desc">普通选择器</text> <picker bind:change="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> <view class="section"> <view class="page__desc">普通objectArray选择器</view> <picker bind:change="bindPickerChange" value="{{index}}" range="{{objectArray}}" range-key="{{'id'}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> <view class="section"> <view class="page__desc">多列选择器</view> <picker mode="multiSelector" bind:change="bindMultiPickerChange" bind:columnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view> </picker> </view> </view> <view class="section"> <view class="page__desc">多列ObjectArray选择器</view> <picker mode="multiSelector" bind:change="bindMultiPickerChange" bind:columnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'id'}}"> <view class="picker"> 当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view> </picker> </view> <view class="section"> <view class="page__desc">时间选择器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bind:change="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker> </view> <view class="section"> <view class="page__desc">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bind:change="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker> </view> 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 组件，其它节点不会显示。

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

picker-view-column

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

示例代码

请参考 picker-view 组件。

radio

单选项目。

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

radio-group

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

属性说明 属性名类型默认值必填说明namestring否用于 <form /> 组件，在表单提交事件中作为提交数据的 key 值bind:changeeventhandle否radio-group 中选中项发生改变时触发 change 事件，detail = {value:[选中的 radio 的 value 的数组]} 示例代码 TYML <radio-group class="radio-group" bind:change="radioChange"> <view ty:for="{{items}}" ty:key="name"> <label> <radio class="radio" value="{{item.name}}" checked="{{item.checked}}"></radio> <text class="text">{{item.value}}</text> </label> </view> </radio-group> 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

滑动选择器。

属性说明 属性名类型默认值必填说明minnumber0否最小值maxnumber100否最大值stepnumber1否步长，取值必须大于 0，并且可被(max - min)整除disabledbooleanfalse否是否禁用valuenumber0否当前取值active-colorcolor#007aff否已选择的颜色background-colorcolorrgba(0,0,0,.2)否背景条的颜色block-sizenumber28否滑块的大小，取值范围为 12 - 28block-colorcolor#ffffff否滑块的颜色show-valuebooleanfalse否是否显示当前 valuebind:changeeventhandle否完成一次拖动后触发的事件，event.detail = {value}bindchangingeventhandle否拖动过程中触发的事件，event.detail = {value} 示例代码 TYML <view class="page l-r-padding"> <view class="page__bd"> <view class="section"> <text class="section__title">基础</text> <view class="body-view"> <slider value="{{30}}" bind:changing="slider1changing" bind:change="slider1change" /> </view> </view> <view class="section"> <text class="section__title">设置step</text> <view class="body-view"> <slider bind:change="slider2change" step="{{5}}"/> </view> </view> <view class="section"> <text class="section__title">显示当前value</text> <view class="body-view"> <slider bind:change="slider3change" showValue="{{true}}" /> </view> </view> <view class="section"> <text class="section__title">设置最小/最大值</text> <view class="body-view"> <slider bind:change="slider4change" min="{{50}}" max="{{200}}" /> </view> </view> </view> </view> 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

开关选择器。

属性说明 属性名类型默认值必填说明checkedbooleanfalse否是否选中disabledbooleanfalse否是否禁用typestringswitch否样式，有效值：switch, checkboxcolorcolor#007AFF否switch 的颜色，同 css 的 colorbind:changeeventhandle否checked 改变时触发 change 事件，event.detail={ value:checked } 示例代码 TYML <view> <view> <view>默认选中：</view> <switch checked="{{isChecked}}" bind:change="handleSwitchChange"></switch> </view> <view> <view>disabled：</view> <switch disabled="true" bind:change="handleSwitchChange"></switch> </view> <view> <view>type：</view> <switch type="checkbox" bind:change="handleSwitchChange"></switch> </view> <view> <view>color:</view> <switch color="var(--ty-native-warn-color)" bind:change="handleSwitchChange"></switch> </view> </view>

textarea

多行文本输入框。

属性说明 属性名类型默认值必填说明备注valuestring--否输入框的内容placeholderstring--否输入框为空时占位符placeholder-stylestring--否指定 placeholder 的样式disabledbooleanfalse否是否禁用maxlengthnumber-1否最大输入长度，设置为 -1 的时候不限制最大长度auto-heightbooleanfalse否是否自动增高，设置 auto-height 时，设置 height 样式不生效bind:inputeventhandler--否键盘输入时触发，e.detail={value}bind:focuseventhandler--否输入框聚焦时触发，event.detail={value}bind:blureventhandler--否输入框失去焦点时触发，event.detail={value}bind:linechangeeventhandler--否输入框行数变化时调用，event.detail = {height: 0, lineCount: 0} 示例代码 TYML <view class="page-body"> <view class="page-section"> <view class="page-section-title l-r-padding">输入区域高度自适应，不会出现滚动条</view> <view class="textarea-wrp"> <textarea class="textarea-box" auto-height="true" bind:input="bindTextAreainput" bind:focus="bindTextAreaFocus" bind:blur="bindTextAreaBlur" bind:linechange="linechange" /> </view> </view> </view> JS Page({ data: { value: '', }, bindTextAreainput: function (e) { console.log('demo bindTextAreainput', e.detail.value, e.detail); this.setData({ value: e.detail.value, }); }, bindTextAreaFocus: function (e) { console.log('demo bindTextAreaFocus', e.detail.value, e.detail); }, bindTextAreaBlur: function (e) { console.log('demo bindTextAreaBlur', e.detail.value, e.detail); }, linechange: function (e) { console.log('demo linechange', e.detail); }, }); TYSS .textarea-box { width: 100%; padding: 12px 0; } .page-section { width: 100%; margin-top: 30px; } .textarea-wrp { padding: 0 12px; background-color: #fff; margin: 10px 20px; } .placeholder { color: red; font-size: 20px; background: goldenrod; }