小程序七：组件之表单组件

最新推荐文章于 2024-07-31 23:49:37 发布
最新推荐文章于 2024-07-31 23:49:37 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 微信
button
按钮组件。
属性名 类型 默认值 说明
size String default 有效值default, mini
type String default 按钮的样式类型，有效值primary, default, warn
plain Boolean false 按钮是否镂空，背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名称前是否带 loading 图标
formType String 无 有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class String button-hover 指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果
注：button-hover默认为{background-color:rgba(0,0,0,0.1);opacity:0.7;}
示例代码：
index.wxss: 
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover{
  background-color:red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover{
  background-color:blur;
}

index.wxml: 
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>

index.js: 
var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  }
}

for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}
Page(pageObject)

checkbox
[1]checkbox-group
多选项目组，内部由多个 checkbox 组成。
checkbox-group内只能包含checkbox
属性名 类型 默认值 说明
bindchangeEventHandle checkbox-group中选中项发生改变是触发change事件，detail = {value:[选中的checkbox的value的数组]}
[2]checkbox
多选项目。
属性名 类型 默认值 说明
valueString checkbox标识，选中时触发checkbox-group的change事件，并携带checkbox的value
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中，可用来设置默认选中
示例：
index.wxml: 
<checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for-items="{{items}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
</checkbox-group>

index.js: 
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

form
将表单内的用户输入的 switch   input   checkbox   slider   radio   picker  提交
属性名 类型 说明
report-submit Boolean 是否返回formId用于发送模板消息
bindsubmit EventHandle 携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }
bindreset EventHandle 表单重置时会触发reset事件
示例代码：
index.wxml: 
<form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section section_gap">
        <view class="section__title">switch</view>
        <switch name="switch"/>
    </view>
    <view class="section section_gap">
        <view class="section__title">slider</view>
        <slider name="slider" show-value ></slider>
    </view>
    <view class="section">
        <view class="section__title">input</view>
        <input name="input" placeholder="please input here" />
    </view>
    <view class="section section_gap">
        <view class="section__title">radio</view>
        <radio-group name="radio-group">
            <label><radio value="radio1"/>radio1</label>
            <label><radio value="radio2"/>radio2</label>
        </radio-group>
    </view>
    <view class="section section_gap">
        <view class="section__title">checkbox</view>
        <checkbox-group name="checkbox">
            <label><checkbox value="checkbox1"/>checkbox1</label>
            <label><checkbox value="checkbox2"/>checkbox2</label>
        </checkbox-group>
    </view>
    <view class="btn-area">
        <button formType="submit">Submit</button>
        <button formType="reset">Reset</button>
    </view>
</form>

index.js: 
Page({
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function() {
    console.log('form发生了reset事件')
  }
})

input
属性名 类型 默认值 说明
value String   输入框的内容
type String text input的类型，有效值：text,number,idcard,digit,time,date
password Boolean false 是否是密码类型
placeholder String   输入框为空时占位符
placeholder-style String   指定placeholder的样式
placeholder-class String input-placeholder 指定placeholder的样式类
disabled Boolean false 是否禁用
maxlength Number 140 最大输入长度，设置为0的时候不限制最大长度
auto-focus Boolean false 自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性
focus Boolean false 使得input获取焦点
bindchange EventHandle   输入框失去焦点时，触发bindchange事件，event.detail={value:value}
bindinput EventHandle   除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。
bindfocus EventHandle   输入框聚焦时触发，event.detail = {value:value}
bindblur EventHandle   输入框失去焦点时触发，event.detail = {value:value}
示例代码：
index.wxml: 
<view class="section">
    <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
    <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
    <view class="btn-area">
        <button bindtap="bindButtonTap">使得输入框获取焦点</button>
    </view>
</view>
<view class="section">
    <input  maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
    <view class="section__title">你输入的是：{{inputValue}}</view>
    <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
    <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
    <input  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section">
    <input type="emoji" placeholder="这是一个带有表情的输入框" />
</view>
<view class="section">
    <input password type="number" />
</view>
<view class="section">
    <input password type="text" />
</view>
<view class="section">
    <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
    <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
    <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
</view>
index.js: 
Page({
  data:{
    focus:false,
    inputValue:""
  },
  bindButtonTap:function(){
    this.setData({
      focus:Date.now()
    })
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  bindReplaceInput:function(e){
    var value = e.detail.value;
    var pos = e.detail.cursor;
    if(pos != -1){
      //光标在中间
      var left = e.detail.value.slice(0,pos);
      //计算光标的位置
      pos = left.replace(/11/g,'2').length;
    }

    //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value:value.replace(/11/g,'2'),
      cursor:pos
    }

    //或者直接返回字符串,光标在最后边
    //return value.replace(/11/g,'2'),
  },
  bindHideKeyboard:function(e){
    if(e.detail.value === "123"){
      //收起键盘
      wx.hideKeyboard();
    }
  }
})

label
用来改进表单组件的可用性，使用 for 属性找到对应的 id ，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有： button ,  checkbox ,  radio ,  switch 。
属性名 类型 说明
forString绑定控件的id
示例代码：
index.wxml: 
<view class="section section_gap">
<view class="section__title">表单组件在label内</view>
<checkbox-group class="group" bindchange="checkboxChange">
    <view class="label-1" wx:for-items="{{checkboxItems}}">
        <label>
            <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
            <view class="label-1__icon">
                <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
            </view>
            <text class="label-1__text">{{item.value}}</text>
        </label>
    </view>
</checkbox-group>
</view>

<view class="section section_gap">
<view class="section__title">label用for标识表单组件</view>
<radio-group class="group" bindchange="radioChange">
    <view class="label-2" wx:for-items="{{radioItems}}">
        <radio id="{{item.name}}" hidden value="{{item.name}}" checked="{{item.checked}}"></radio>
        <view class="label-2__icon">
            <view class="label-2__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
        </view>
        <label class="label-2__text" for="{{item.name}}"><text>{{item.name}}</text></label>
    </view>
</radio-group>
</view>

<view class="section section_gap">
<view class="section__title">绑定button</view>
<label class="label-3">
    <text>点击这段文字，button会被选中</text>
</label>
<view class="btn-area">
    <button type="default" name="1" bindtap="tapEvent">按钮</button>
</view>
</view>

<view class="section section_gap">
<view class="section__title">label内有多个时选中第一个</view>
<label class="label-4">
    <checkbox> 选中我 </checkbox>
    <checkbox> 选不中 </checkbox>
    <checkbox> 选不中 </checkbox>
    <checkbox> 选不中 </checkbox>
    <view class="label-4_text">点我会选中第一个</view>
</label>
</view>

index.js: 
Page({
  data: {
    checkboxItems: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本', checked: 'true'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ],
    radioItems: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ],
    hidden: false
  },
  checkboxChange: function(e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.checkboxItems.length; i ++) {
      if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
        changed['checkboxItems['+i+'].checked'] = true
      } else {
        changed['checkboxItems['+i+'].checked'] = false
      }
    }
    this.setData(changed)
  },
  radioChange: function(e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.radioItems.length; i ++) {
      if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
        changed['radioItems['+i+'].checked'] = true
      } else {
        changed['radioItems['+i+'].checked'] = false
      }
    }
    this.setData(changed)
  }
})

index.wxss: 
.label-1, .label-2{
    margin-bottom: 15px;
}
.label-1__text, .label-2__text {
    display: inline-block;
    vertical-align: middle;
}

.label-1__icon {
    position: relative;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background: #fcfff4;
}

.label-1__icon-checked {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #1aad19;
}


.label-2__icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    background: #fcfff4;
    border-radius: 50px;
}

.label-2__icon-checked {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    background: #1aad19;
    border-radius: 50%;
}

.label-4_text{
    text-align: center;
    margin-top: 15px;
}

picker
滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器
普通选择器：mode=selector
属性名 类型 默认值 说明
range Array [] mode为selector时，range有效
value Number 0 mode为selector时，是数字，表示选择了range中的第几个，从0开始。
bindchange EventHandle   value改变时触发change事件，event.detail= { value:value}
时间选择器：mode=time
属性名 类型 默认值 说明
value String   表示选中的时间，格式为"hh:mm"
  String   表示有效时间范围的开始，字符串格式为"hh:mm"
  String   表示有效时间范围的结束，字符串格式为"hh:mm"
  EventHandle   value改变时触发change事件，event.detail= { value:value}
日期选择器：mode=date
属性名 类型 默认值 说明
value String 0 表示选中的日期，格式为"yyyy-MM-dd"
start String   表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
end String   表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
fields String day 有效值year,month,day，表示选择器的粒度
bindchange EventHandle   value改变时触发change事件，event.detail= { value:value}

示例代码：
index.wxml: 
<view class="section">
    <view class="section__title">地区选择器</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
            当前选择：{{array[index]}}
        </view>
    </picker>
</view>
<view class="section">
    <view class="section__title">时间选择器</view>
    <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
        <view class="picker">
            当前选择: {{time}}
        </view>
    </picker>
</view>

<view class="section">
    <view class="section__title">日期选择器</view>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
        <view class="picker">
            当前选择: {{date}}
        </view>
    </picker>
</view>

index.js: 
Page({
  data: {
    array:["美国","中国","巴西","日本"],
    index:0,
    date:"2016-09-01",
    time:"12:01"
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange:function(e){
    this.setData({
      date:e.detail.value
    })
  },
  bindTimeChange:function(e){
    this.setData({
      time:e.detail.time
    })
  }
})

radio
[1]radio-group​
单选项目组，内部由多个 radio 组成
属性名 类型 默认值 说明
bindchangeEventHandle radio-group中的选中项发生变化时触发change事件，event.detai = {value : 选中项radio的value
[2]radio
​ 单选项目
属性名 类型 默认值 说明
valueString radio标识。当该radio选中时，radio-group的change事件会携带radio的value
checkedBooleanfalse当前是否选中
disabledBooleanfalse是否禁用
index.wxml: 
<radio-group class="radio-group" bindchange="radioChange">
    <label class="radio" wx:for-items="{{items}}">
        <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
</radio-group>

index.js: 
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', 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 当前取值
show-value Boolean false 是否显示当前value
bindchange EventHandle   完成一次拖动后触发的事件，event.detail = {value:value}
示例代码：
index.wxml: 
<view class="section section_gap">
    <text class="section__title">设置left/right icon</text>
    <view class="body-view">
        <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
</view>

<view class="section section_gap">
    <text class="section__title">设置step</text>
    <view class="body-view">
        <slider bindchange="slider2change" step="5"/>
    </view>
</view>

<view class="section section_gap">
    <text class="section__title">显示当前value</text>
    <view class="body-view">
        <slider bindchange="slider3change" show-value/>
    </view>
</view>

<view class="section section_gap">
    <text class="section__title">设置最小/最大值</text>
    <view class="body-view">
        <slider bindchange="slider4change" min="50" max="200" show-value/>
    </view>
</view>

index.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)

switch
开关组件
属性名 类型 默认值 说明
checkedBooleanfalse是否选中
disabledBooleanfalse是否禁用
typeStringswitch样式，有效值：switch, checkbox
bindchangeEventHandle checked改变时触发change事件，event.detail={ value:checked}
index.wxml: 
<view class="section section_gap">
    <view class="section__title">type="switch"</view>
    <view class="body-view">
        <switch checked="{{switch1Checked}}" bindchange="switch1Change"/>
    </view>
</view>

<view class="section section_gap">
    <view class="section__title">type="checkbox"</view>
    <view class="body-view">
        <switch type="checkbox" checked="{{switch2Checked}}" bindchange="switch2Change"/>
    </view>
</view>

index.js: 
var pageData = {
  data: {
    switch1Checked: true,
    switch2Checked: false,
    switch1Style: '',
    switch2Style: 'text-decoration: line-through'
  }
}
for(var i = 1; i <= 2; ++i) {
  (function(index) {
    pageData[`switch${index}Change`] = function(e) {
      console.log(`switch${index}发生change事件，携带值为`, e.detail.value)
      var obj = {}
      obj[`switch${index}Checked`] = e.detail.value
      this.setData(obj)
      obj = {}
      obj[`switch${index}Style`] = e.detail.value ? '' : 'text-decoration: line-through'
      this.setData(obj)
    }
  })(i)
}
Page(pageData)

PHP学习与交流
关注
专栏目录
微信小程序demo：校内约；表单组件使用
03-17
活动约起来的demo：   示例代码：   免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服...
微信小程序学习之路——表单组件（二）
创作星球
03-31 1733
input <input/>是单行输入框，用于收集用户信息，其属性如下： 属性名 类型 默认值 说明 最低版本 value String 输入框的初始内容 type String "text" input 的类型 password Boolean false 是否是密码...
e.detail.value 小程序如何传值
热门推荐
jzan1984的博客
11-15 3万+
{{text}} //获取应用实例 const app = getApp() Page({ data: { text: “点击”, inputVal: null }, input: function(e){ // console.log(e); this.setData({inputVal:e.detail.value}); }, btnclick:function(){ console.log...
【愚公系列】《AIGC辅助软件开发》020-AI 辅助测试与调试：如何让AI更好地辅助我们工作
最新发布
时光隧道
07-31 1万+
在数字化转型的浪潮中，人工智能（AI）正逐渐渗透到各个行业，改变着我们的工作方式。尤其在软件开发领域，AI的应用正在开启全新的可能性。本文将探讨如何利用AI辅助后端编程，提升我们的工作效率和代码质量。随着技术的不断演进，后端开发面临着越来越复杂的挑战，包括快速响应需求变化、保证系统稳定性以及优化开发流程等。为了应对这些挑战，借助AI技术成为了一个有效的解决方案。本文将分享一些实用的方法与工具，帮助开发者更好地将AI融入日常工作中，从代码生成、调试到文档编写，AI都可以成为我们得力的助手。
一个简单的微信小程序表单提交样式模板
m0_52244931的博客
03-10 1424
没什么东西，只是方便自己直接复制使用。
微信小程序动态生成表单来啦！你再也不需要手写表单了！
分享互联网的有趣知识~
11-18 3337
由于我们在小程序上涉及到数据采集业务，需要经常使用表单，微信小程序的表单使用起来非常麻烦，数据和表单是分离的，每个输入框都需要做数据处理才能实现响应式数据，所以我开发了dc-vant-form，针对原生微信小程序+vant组件构建的自定义表单，开发者可以通过表单配置项来快速生成表单。
html5表单组件,10 HTML5表单各种组件
weixin_42128558的博客
07-01 924
H5表单组件H5的表单组件分为：文字组件，列表组件，选择组件，按钮组件1 - 输入组件输入组件的作用是让用户输入数据，输入组件包括，text，textarea, paawordH5新增的有date,number,color,range等input组件，要配合JS使用。文本框text 语法：type:文本框的输入方式是text，上线255个字符name:相当于文本框的标识value:文本框的默认值，...
微信小程序开发之（表单组件的使用）
06-28
在微信小程序的开发中，表单组件是构建用户交互界面不可或缺的部分。本教程将深入探讨如何利用微信小程序的API和组件来实现视频播放、轮转图片、多选框、单选框以及实时获取输入值等功能，并通过按钮提交输入控件的...
微信小程序组件系列：form表单讲解
03-29
form表单组件说明:  表单，将组件内的用户输入的<switch> <input/> <checkbox> <slider> <radio>  提交。  当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时，会将表单组件中...
微信小程序-组件练习
03-15
首先，微信小程序的组件是其核心特性之一，它们是预先定义好的UI元素，开发者可以通过简单的配置和组合来构建应用程序的界面。常见的组件包括视图容器（如view、scroll-view）、基础内容（如text、image）、表单组件...
小程序日期时间组件demo
12-12
在微信小程序开发中，日期时间组件是不可或缺的一部分，它允许用户方便地选择日期或时间，常见于各种表单填写、预约服务或者日程安排等场景。本教程将深入讲解“小程序日期时间组件demo”，帮助开发者了解如何在小...
微信小程序wxml传递值总结（e.currentTarget，e.detail.value)
weixin_43898134的博客
02-15 1万+
本文主要讲解一下三个函数 e.currentTarget.dataset.index 获取到 data-index 中的值 e.currentTarget.id 获取到 id 中的值 e.detail.value.(***) 动态获取 input 中的值 1. bindtap Example 1. JS文件中声明的值 // js文件 recommendInfo: [ { ...
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流)
风起云涌的博客
06-28 4983
问题 微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输入"ni’hao", 还没有选定汉字"你好", 就已经触发了, 我想改成当选定"你好"后再触发 解决方案 bindinput 的detail中有一个 cursor 的属性，返回光标位置，可以根据 此次输入时的cursor对比上一次的cursor 来判断, 键盘输入时触发，event.detail = {v...
实现一个简单的小程序Form表单填写页面
m0_54340021的博客
05-31 902
本文介绍了如何使用Vue框架和Uni-app工具开发一个小程序表单填写页面。文章首先概述了表单在移动应用中的重要性，并引导读者通过构建一个简洁实用的表单页面。在HTML模板部分，详细解释了滚动视图、表单容器、表单项和提交按钮的布局和实现。接着，在JavaScript脚本部分，讨论了数据绑定、生命周期钩子和事件处理方法。最后，文章通过SCSS样式定制了表单的视觉表现。文章旨在帮助开发者快速掌握小程序表单的设计和实现，提升用户体验，并鼓励开发者不断学习新技术以满足不断变化的市场需求。
input或textarea字数的限制
努力奔跑的小不点
05-18 212
<textarea value="" placeholder="请输入您对产品或其他方面的意见" v-model="textContent" maxlength="180" @input="descInput"/> data() { return { value:0,//字数 textContent:''//内容 } }, onShow() { this.textContent = uni.getStorageSync('textContent') || ''; thi
微信小程序--》数据绑定和事件绑定
ztK63LrD的博客
07-20 4232
详解数据绑定和事件绑定
3-8 form组件
u012717715的博客
05-24 331
form 基础库 1.0.0 开始支持，低版本需做兼容处理。 表单。将组件内的用户输入的<switch><input><checkbox><slider><radio><picker>提交。 当点击<form>表单中 form-type 为 submit 的<button>...
小程序5-页面
qq_29539827的博客
09-23 171
小程序页面标签属性值，汇表记录如下， 多背几遍写的时候熟练更好，就不用经常来翻看有什么属性能达成什么效果，某个属性有哪些可取的值。 buttom按钮 属性名 类型 默认值 说明 size String default 按钮的大小。值为default(满屏宽)、mini(很小的) type String default 类型，值default(白色背景)、primary(绿色背景...
微信小程序常用表单组件
冲出仁川，走出马德里，故事还会再继续
03-16 9638
微信小程序常用表单组件1、常用表单组件1.1 button1.2 checkbox1.3 input1.4 label1.5 form1.6 radio1.7 slider1.8 switch1.9 textarea2、实训小案例--问卷调查 1、常用表单组件 1.1 button   <button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。 代码示例： <view class="demo-box"> <view class="t
小程序表单提交实战：form组件详解
在微信小程序中，`<form/>`组件用于收集多个表单组件的数据，如`<input/>`, `<checkbox/>`, `<slider/>`等。当用户点击设置为`formType="submit"`的`<button/>`时，表单会自动收集所有具有`name`属性的子组件的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值