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

已于 2024-01-16 11:44:06 修改
阅读量1.3k 收藏 22
点赞数 29
文章标签： 物联网 iot paas sass 人工智能 小程序 App
于 2024-01-16 11:42:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ms_Smart/article/details/135619793
版权

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

button

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

属性说明

属性名类型默认值必填说明
sizestringdefault否按钮的大小
typestringdefault否按钮的样式类型
plainbooleanfalse否是否镂空
disabledbooleanfalse否是否禁用
loadingbooleanfalse否是否带 loading 图标
form-typestring否用于嵌在 form 组件中，控制 submit/reset
hover-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 的 value
disabledbooleanfalse否是否禁用
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 的 value
checkedbooleanfalse否当前是否选中
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 - 28
block-colorcolor#ffffff否滑块的颜色
show-valuebooleanfalse否是否显示当前 value
bind: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, checkbox
colorcolor#007AFF否switch 的颜色，同 css 的 color
bind: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;
}
IoT砖家涂拉拉
关注
  • 29
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序开发中的数据筛选和搜索功能
m0_75244442的博客
07-17 198
在微信小程序开发中，数据筛选和搜索功能是非常常见的需求。本文将通过代码案例，详细介绍如何在微信小程序中实现数据筛选和搜索功能。首先，我们需要准备一些模拟数据，以便后续的示例代码。函数来筛选商品列表，根据选择的分类和搜索关键词进行筛选，并将筛选结果存储在。接下来，我们将创建一个列表页面，展示商品列表，并提供筛选和搜索功能。至此，我们已经完成了在微信小程序中实现数据筛选和搜索功能的代码案例。方法用于处理分类筛选器的变化事件，将选择的分类存储在。方法用于处理搜索框输入事件，将输入的关键词存储在。
小程序基本命令
aiven1637的博客
10-30 3294
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序开发：通过picker组件获取查询列表，并根据查询列表进行查询
BigGod_lxj的博客
04-20 1008
一、代码要实现的效果 二、代码设计 wxml： <view class="tagselect block"> <text class="tag font_big">选择商品</text> <picker bindchange="bindPickerChange" class="font_big font_gray " ...
微信小程序实战—实现城市列表的选择
热门推荐
yyf的博客
01-19 2万+
微信小程序实战—实现城市列表的选择 实现效果预览 实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json {
小程序源码 万年历 (代码+截图)
06-19
小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+截图)小程序源码 万年历 (代码+...
小程序源码 天气预报 (代码+截图)
06-19
小程序源码 天气预报 (代码+截图)小程序源码 天气预报 (代码+截图)小程序源码 天气预报 (代码+截图)小程序源码 天气预报 (代码+截图)小程序源码 天气预报 (代码+截图)小程序源码 天气预报 (代码+截图)小程序源码 ...
安卓Widget小组件相关-Android小部件AppWidget.rar
07-29
这个压缩包“Android小部件AppWidget.rar”似乎包含了一些关于创建和实现Android Widget小组件的资源，可能是源代码、文档或者示例项目。 在Android开发中，AppWidget是Widget小组件的主要实现类。它是由Android ...
安卓Widget小组件相关-androidWidget小组件开发.zip
07-29
本资料包"androidWidget小组件开发.zip"包含了一个名为"MyWidget"的示例项目，可能包含了关于如何创建和实现Android Widget小组件的代码和资源。 1. **Widget组件概述** - Android Widget是Android系统中的一个...
安卓Widget小组件相关-WidgetTest.zip
07-29
【Android Widget小组件详解】 Android Widget是Android系统中一种特殊的应用组件，允许开发者在用户的主屏幕上提供快捷操作或信息展示。这些小组件虽然不像应用程序那样全功能，但它们提供了便捷的交互方式，使得...
串口服务器赋能智慧农业农田监测物联网应用
ZLWL2013的博客
08-14 374
智能温室控制：在智能温室中，串口服务器可以与温室内的各种设备（如风机、水泵、遮阳帘等）相连，实现温室环境的远程监控和自动调节，为作物创造最适宜的生长环境。随着农业现代化和农村发展，通过政策支持和资金投入，鼓励农业创新和技术应用。农产品追溯：通过串口服务器，可以将农产品的生产、加工、运输等各个环节的数据进行实时采集和上传，实现农产品的全程追溯，提高农产品的安全性和品质。设备管理：通过串口服务器，可以实现对远端串口设备的远程管理和控制，包括设备的配置、升级、监控等，大大降低了人工维护的成本和难度。
WT32-ETH01开发板模块，启明云端物联网方案，乐鑫ESP32多样化开发应用
wireless_tag的博客
08-14 352
WT32-ETH01模块广泛应用于智能家居、工业物联网等领域，提供了一套完整的智能家居产品解决方案，覆盖硬件、嵌入式系统、云服务、数据分析和APP应用等方面，满足不同行业和领域的需求。启明云端WT32-ETH01开发板模块，是基于乐鑫ESP32系列开发的嵌入式串口转以太网模块，不仅集成了优化的TCP/IP协议栈，而且提供了多种工作模式，满足不同场景下的应用需求。可以嵌入到配电箱中，实现对电力系统的实时监控，包括电流、电压、功率等参数的监测，并通过以太网将数据传输至监控中心，提高电力系统的安全性和可靠性。
中职物联网实训室
whwzzc的博客
08-15 985
每个学生可以在平台中自由创建物联网项目，通过自己的项目来控制实训设备，并且该平台同时支持多端操作（可以上网的PC、智能手机、平板电脑等），物联网融合平台真正的做到了让学生体会到物联网技术的应用以及物联网应用的职业前景。物联网教学云平台是一个开放式的课程平台，除了唯众的课程体系之外，老师可自主开发在线课程，支持Word、PPT、PDF、视频等常见课件直接转换成在线课程，从而让老师很方便的将专业基础课程迁移到平台上，便于构建完整的物联网、大数据、云计算、人工智能专业课程体系。【软件系统】物联网项目实训平台。
基于CDIO概念的人工智能物联网系统开发与实施的人才培养研究
最新发布
bit_mike的博客
08-17 517
这篇论文主要探讨了基于CDIO（Conceive-Design-Implement-Operate）概念的人工智能物联网（AIoT）系统开发与实施的人才培养模式。
全开源智慧停车场微信小程序源码/智能停车系统源码/停车自助缴费系统/停车场管理收费+物业管理+物联网+自助缴费功能
sqll567的博客
08-14 409
智慧停车场微信小程序源码，全开源智能停车系统源码，停车自助缴费系统，具有停车场管理、停车收费、物业管理、物联网、自助缴费等多种功能。这是一个全开源的智能停车系统，功能强大。它不仅能帮你管理停车场、收取停车费，还能处理物业管理等琐事。厉害的是，它还结合了物联网技术，能自助缴费，方便多了！
基于鸿蒙OS的物联网多协议网关：集成MQTT、CoAP、Zigbee和LoRa的高性能解决方案（代码示例）
嵌入式极客小张
08-14 1081
本项目旨在利用鸿蒙操作系统的单片机开发一个多协议网关，实现多种物联网协议的互通和转换。该网关将支持包括MQTT、CoAP、Zigbee和LoRa等主流物联网协议，为智能家居、工业物联网等应用场景提供灵活、高效的数据交互解决方案。通过实现这个多协议网关，我们可以解决以下关键问题：协议兼容性：实现不同协议设备之间的无缝通信。数据整合：统一管理来自各种协议的数据，便于后续处理和分析。网络优化：根据不同协议的特性，优化数据传输路径和方式。安全性提升：在网关层统一实现安全策略，提高整个物联网系统的安全性。
农业物联网6公里WiFi远距离传输模块，信号传输不再受限，抗干扰、连接快
m0_59195407的博客
08-14 906
在数字化时代，WiFi已成为我们生活中不可或缺的一部分。这时候，一种能够实现6公里远距离WiFi传输的神秘模块便应运而生，它不仅解决了信号覆盖的难题，更在无形中改变了我们的生活方式。农业物联网：在农业物联网领域，6公里WiFi远距离传输模块能够将农田中的传感器、摄像头等设备与云端平台进行连接，实现数据的实时采集和传输。无线通信技术：6公里WiFi远距离传输模块采用了先进的无线通信技术，如OFDM（正交频分复用）、MIMO（多输入多输出）等，这些技术能够在保证数据传输速率的同时，有效减少信号衰减和干扰。
嵌入式人工智能ESP32（4-PWM呼吸灯）
u010152658的博客
08-12 813
PWM就是在合适的信号频率下，通过一个周期里改变占空比的方式来改变输出的有效电压。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值