网站首页设计过程,红色网站建设,湖北城乡建设厅官方网站,慧聪网首页在 Tuya MiniApp Tools 中#xff0c;新建项目并选择小部件(Widget)对应模板即可自动创建小部件(Widget)项目。
button
按钮#xff0c;用于强调操作并引导用户去点击。
属性说明
属性名类型默认值必填说明sizestringdefault否按钮的大小typestringdefault否按钮的样式类…在 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 classbutton-pagebutton typeprimary bind:taphandleFirstBtnTap主操作/buttonbutton typeprimary loadingtrue主操作/buttonbutton typeprimary disabledtrue主操作/buttonbutton typedefault次要操作/buttonbutton typedefault disabledtrue次要操作/buttonbutton typewarn警告操作/buttonbutton typewarn disabledtrue警告操作/buttonbutton typeprimary plaintrue按钮/buttonbutton typeprimary disabledtrue plaintrue不可点击按钮/buttonbutton typedefault plaintrue按钮/buttonbutton typedefault disabledtrue plaintrue按钮/buttonview classbutton-sp-areabutton classmini-btn typeprimary sizemini按钮/buttonbutton classmini-btn typedefault sizemini按钮/buttonbutton classmini-btn typewarn sizemini按钮/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
labelcheckbox classcheckItem valuevalue1 disabledtrue/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:changecheckboxChangeviewlabelcheckbox classcheckItem valuevalue1 disabledtrue/checkbox选项1 不可选/label/viewviewlabelcheckbox classcheckItem valuevalue2 /checkbox选项2/label/viewviewlabelcheckbox classcheckItem valuevalue3/checkbox选项3/label/viewviewlabelcheckbox classcheckItem valuevalue4 checkedtrue/checkbox选项4 默认选中/label/view
/checkbox-group
JS
Page({data: {},checkboxChange(ev) {console.log(ev.detail.value);},
}); form
表单。将组件内的用户输入的 inputtextareacheckbox-groupradio-grouppickerswitchslider 提交。 当点击 form 表单中 form-type 为 submit 的 button 组件时会将表单组件中的 value 值进行提交需要在表单组件中加上 name 来作为 key。
属性说明
属性名类型默认值必填说明bind:submiteventhandle否携带 form 中的数据触发 submit 事件event.detail 中可以取到 name 对应表单项的值bind:reseteventhandle否表单重置时会触发 reset 事件
示例代码
TYML
view classform-pageview classpage-sectionform bind:submithandleSubmit bind:resethandleReset idformSelfview classitem-wraptext classpage-section-title section-titleswitch/textswitch nameswitch/switch/viewview classitem-wraptext classpage-section-title section-titleslider/textslider nameslider show-value{{true}} value{{42}}/slider/viewview classitem-wraptext classpage-section-title section-titlecheckbox/textcheckbox-group nameCheckboxGroupcheckbox classradio value选项一text classtext选项一/text/checkboxcheckbox classradio value选项二text classtext选项二/text/checkbox/checkbox-group/viewview classitem-wraptext classpage-section-title section-titleradio/textradio-group nameRadioGroupradio classradio value单选一text classtext单选一/text/radioradio classradio value单选二text classtext单选二/text/radio/radio-group/viewview classitem-wraptext class page-section-title section-titleinput/textview classtyui-cellinput classtyui-input nameinput placeholder请输入 //view/viewview classitem-wraptext classpage-section-title section-titletextarea/textview classtextarea-wraptextarea nametextarea classtxtarea-box bind:inputhandleTextareaInput/textarea/view/viewview classbtns-wrapview classbtn-linebutton form-typesubmit idtriggerBtn data-info提交的按钮 typeprimary classsubmit-btn提交/button/viewview classbtn-linebutton form-typereset idresetBtn data-inforeset的按钮 classreset-btn重置/button/view/view/formview classresult-wrapview ty:for{{resultData}} ty:key{{item.name}} classresult-itemtext classresult-name{{item.name}}: /texttext{{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 classpage-sectionview classpage-section-title l-r-padding控制最大输入长度的input/viewview classtyui-cellinputclasstyui-inputmaxlength{{10}}placeholder{{placeholder}}//view
/view
view classpage-sectionview classpage-section-title l-r-padding实时获取输入值{{inputValue}}/viewview classtyui-cellinput classtyui-input bind:inputbindKeyInput bind:blurbindKeyBlur bind:focusbindKeyFocus placeholder输入同步到view中//view
/view
view classpage-sectionview classpage-section-title l-r-padding数字输入的input/viewview classtyui-cellinput classtyui-input typenumber placeholder这是一个数字输入框 //view
/view
view classpage-sectionview classpage-section-title l-r-padding密码输入的input/viewview classtyui-cellinput classtyui-input password{{true}} typetext 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 classflex-algin-centercheckbox valuetest/checkboxtext classlabel-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日期选择器
除了上述通用的属性对于不同的 modepicker拥有不同的属性见下方。
普通选择器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:mmstartstring表示有效时间范围的开始字符串格式为hh:mmendstring表示有效时间范围的结束字符串格式为hh:mmbind:changeeventhandlevalue 改变时触发 change 事件event.detail {value}
时间选择器mode date
属性名类型默认值说明valuestring当天表示选中的日期格式为YYYY-MM-DDstartstring表示有效日期范围的开始字符串格式为YYYY-MM-DDendstring表示有效日期范围的结束字符串格式为YYYY-MM-DDfieldsstringday有效值 year,month,day表示选择器的粒度bind:changeeventhandlevalue 改变时触发 change 事件event.detail {value}
fields 有效值
值说明year选择器粒度为年month选择器粒度为月份day选择器粒度为天
示例代码
TYML
view classsectiontext classpage__desc普通选择器/textpicker bind:changebindPickerChange value{{index}} range{{array}}view classpicker当前选择{{array[index]}}/view/picker
/view
view classsectionview classpage__desc普通objectArray选择器/viewpicker bind:changebindPickerChange value{{index}} range{{objectArray}} range-key{{id}}view classpicker当前选择{{array[index]}}/view/picker
/view
view classsectionview classpage__desc多列选择器/viewpicker modemultiSelector bind:changebindMultiPickerChange bind:columnchangebindMultiPickerColumnChange value{{multiIndex}} range{{multiArray}}view classpicker当前选择{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}/view/picker
/view
/view
view classsectionview classpage__desc多列ObjectArray选择器/viewpicker modemultiSelector bind:changebindMultiPickerChange bind:columnchangebindMultiPickerColumnChange value{{multiIndex}} range{{objectMultiArray}} range-key{{id}}view classpicker当前选择{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}/view/picker
/view
view classsectionview classpage__desc时间选择器/viewpicker modetime value{{time}} start09:01 end21:01 bind:changebindTimeChangeview classpicker当前选择: {{time}}/view/picker
/viewview classsectionview classpage__desc日期选择器/viewpicker modedate value{{date}} start2015-09-01 end2017-09-01 bind:changebindDateChangeview classpicker当前选择: {{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 组件其它节点不会显示。
属性说明
属性名类型默认值必填说明valueArraynumber否数组中的数字依次表示 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 classradio-group bind:changeradioChangeview ty:for{{items}} ty:keynamelabelradio classradio value{{item.name}} checked{{item.checked}}/radiotext classtext{{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 classpage l-r-paddingview classpage__bdview classsectiontext classsection__title基础/textview classbody-viewslider value{{30}} bind:changingslider1changing bind:changeslider1change //view/viewview classsectiontext classsection__title设置step/textview classbody-viewslider bind:changeslider2change step{{5}}//view/viewview classsectiontext classsection__title显示当前value/textview classbody-viewslider bind:changeslider3change showValue{{true}} //view/viewview classsectiontext classsection__title设置最小/最大值/textview classbody-viewslider bind:changeslider4change 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
viewviewview默认选中/viewswitch checked{{isChecked}} bind:changehandleSwitchChange/switch/viewviewviewdisabled/viewswitch disabledtrue bind:changehandleSwitchChange/switch/viewviewviewtype/viewswitch typecheckbox bind:changehandleSwitchChange/switch/viewviewviewcolor:/viewswitch colorvar(--ty-native-warn-color) bind:changehandleSwitchChange/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 classpage-bodyview classpage-sectionview classpage-section-title l-r-padding输入区域高度自适应不会出现滚动条/viewview classtextarea-wrptextareaclasstextarea-boxauto-heighttruebind:inputbindTextAreainputbind:focusbindTextAreaFocusbind:blurbindTextAreaBlurbind:linechangelinechange//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;
}
