小程序学习之表单组件

最新推荐文章于 2023-06-10 10:25:00 发布

ZHOUYANFEN_A

最新推荐文章于 2023-06-10 10:25:00 发布

阅读量652

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/ZHOUYANFEN_A/article/details/82790173

版权

本文介绍了小程序中常见的表单组件，包括button的属性如size、type、plain和disabled等，checkbox和checkbox-group的使用，以及form的提交机制。还提到了input输入框、picker的各种模式选择器、picker-view的嵌入式选择以及radio和slider的操作。通过示例代码展示了这些组件的用法。

摘要由CSDN通过智能技术生成

1、button（按钮）

常用属性：

size：按钮的大小（default / mini）
type：按钮的样式类型（default（白色）、primary（绿色）、warn（红色））
plain：按钮是否镂空，背景色透明（false、true）
disabled：是否禁用（false、true）
loading：名称前是否带 loading 图标（false、true）

<button>按钮</button>
<button size='mini'>按钮1</button>
<button size='mini' type='primary'>按钮2</button>
<button size='mini' type='default'>按钮3</button>
<button size='mini' type='warn' loading='{[true}}'>按钮4</button>
<button size='mini' type='warn' plain='{
  {true}}'>镂空按钮4</button>
<button size='mini' type='warn' disabled='{
  {true}}'>禁用按钮</button>

2、checkbox（多选项目。）

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

checkbox：多选项目。

属性名	类型	默认值	说明
value	String		`<checkbox/>`标识，选中时触发`<checkbox-group/>`的 change 事件，并携带 `<checkbox/>`的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button/>, <checkbox/>, <radio/>, <switch/>。

属性名	类型	说明
for	String	绑定控件的 id

<checkbox-group>
  <checkbox value='v中国' checked='{
  {true}}' />中国
  <checkbox value='v美国' color='red'/>美国
  <checkbox value='v俄国' color='blue'/>俄国
  <view>注意：以下多选框点击文字不可勾选）</view>
  <view wx:for="{
  {array}}">
    <checkbox value='{
  {item.name}}' checked='{
  {item.checked}}' disabled='{
  {item.disabled}}' color='{
  {item.color}}' />{
  {item.value}}
  </view>

  <view>注意：以下多选框点击文字可勾选）</view>
  <view wx:for="{
  {array}}">
    <checkbox value='{
  {item.name}}' checked='{
  {item.checked}}' disabled='{
  {item.disabled}}' color='{
  {item.color}}'>{
  {item.value}}   </checkbox>
  </view>

  <label wx:for="{
  {array}}">
    <checkbox id='{
  {item.id}}' value='{
  {item.name}}' checked='{
  {item.checked}}' disabled='{
  {item.disabled}}' color='{
  {item.color}}'>{
  {item.value}}   </checkbox>