智能小程序小部件(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
<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

多选项目。

属性说明

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

示例代码

TYML
<label>
  <checkbox class="checkItem" value="value1" disabled="true"></checkbox>选项 不可选
</label>

常见问题(FAQ)

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

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

checkbox-group

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

属性说明

属性名 类型 默认值 必填 说明
name string 用于 <form /> 组件,在表单提交事件中作为提交数据的 key 值
bind:change eventhandle 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:submit eventhandle 携带 form 中的数据触发 submit 事件,event.detail 中可以取到 name 对应表单项的值
bind:reset eventhandle 表单重置时会触发 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

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

属性说明

属性名 类型 默认值 必填 说明 备注
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
<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?

支持,所有的组件都支持 taptouch 事件。

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

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

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

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

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

iOSinputbind: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 属性,联系已隐含存在。

属性说明

属性名 类型 默认值 必填 说明
for string 绑定控件的 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 普通选择器。

属性说明

属性名 类型 默认值 必填 说明
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
<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 组件,其它节点不会显示。

属性说明

属性名 类型 默认值 必填 说明
value Array<number> 数组中的数字依次表示 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 的选中框的高度一致

示例代码

请参考 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 用于 <form /> 组件,在表单提交事件中作为提交数据的 key 值
bind:change eventhandle 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

滑动选择器。

属性说明

属性名 类型 默认值 必填 说明
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
<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

开关选择器。

属性说明

属性名 类型 默认值 必填 说明
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
<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

多行文本输入框。

属性说明

属性名 类型 默认值 必填 说明 备注
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
<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;
}
相关推荐
丁总学Java31 分钟前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
悦涵仙子32 分钟前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
qzhqbb2 小时前
基于统计方法的语言模型
人工智能·语言模型·easyui
冷眼看人间恩怨2 小时前
【话题讨论】AI大模型重塑软件开发:定义、应用、优势与挑战
人工智能·ai编程·软件开发
2401_883041082 小时前
新锐品牌电商代运营公司都有哪些?
大数据·人工智能
AI极客菌3 小时前
Controlnet作者新作IC-light V2:基于FLUX训练,支持处理风格化图像,细节远高于SD1.5。
人工智能·计算机视觉·ai作画·stable diffusion·aigc·flux·人工智能作画
阿_旭3 小时前
一文读懂| 自注意力与交叉注意力机制在计算机视觉中作用与基本原理
人工智能·深度学习·计算机视觉·cross-attention·self-attention
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
Power20246664 小时前
NLP论文速读|LongReward:基于AI反馈来提升长上下文大语言模型
人工智能·深度学习·机器学习·自然语言处理·nlp
数据猎手小k5 小时前
AIDOVECL数据集:包含超过15000张AI生成的车辆图像数据集,目的解决旨在解决眼水平分类和定位问题。
人工智能·分类·数据挖掘