精华内容
下载资源
问答
  • 微信小程序表单组件的应用
  • 2.3.2微信小程序表单组件 checkbox

    千次阅读 2017-04-22 11:33:56
    微信小程序表单组件 checkbox checkbox-group 多选项目组,内部由多个checkbox组成。 checkbox-group内只能包含checkbox 属性名 类型 默认值 说明 bindchange EventHandle   checkbox-group...

    微信小程序表单组件 checkbox

    checkbox-group

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

    checkbox-group内只能包含checkbox

    属性名 类型 默认值 说明
    bindchange EventHandle   checkbox-group中选中项发生改变是触发change事件,detail = {value:[选中的checkbox的value的数组]}

    checkbox

    多选项目。

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

    示例:

    <checkbox-group bindchange="checkboxChange">
        <label class="checkbox" wx:for-items="{{items}}">
            <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
    </checkbox-group>
    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)
      }
    })

    checkbox

    展开全文
  • 微信小程序form基础库 1.0.0 开始支持,低版本需做兼容处理。表单。将组件内的用户输入的switchinputcheckboxsliderradiopicker提交。当点击form表单中 form-type 为 submit 的button组件时,会将表单组件中的 value...

    微信小程序form

    基础库 1.0.0 开始支持,低版本需做兼容处理。

    表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

    当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

    属性

    类型

    默认值

    必填

    说明

    最低版本

    report-submit

    boolean

    false

    是否返回 formId 用于发送模板消息

    1.0.0

    report-submit-timeout

    number

    0

    等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。如果失败,将返回 requestFormId:fail 开头的 formId

    2.6.2

    bindsubmit

    eventhandle

    携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''}

    1.0.0

    bindreset

    eventhandle

    表单重置时会触发 reset 事件

    1.0.0

    示例代码:

    switch

    slider

    input

    radio

    radio1

    radio2

    checkbox

    checkbox1

    checkbox2

    Submit

    Reset

    Page({

    formSubmit: function(e) {

    console.log('form发生了submit事件,携带数据为:', e.detail.value)

    },

    formReset: function() {

    console.log('form发生了reset事件')

    }

    })

    88376808264ddabe4a7485e474d3e6e9.png

    展开全文
  • 寥寥几行代码实现微信小程序表单数据的双向绑定,直接上代码 //wxml //data-name属于自定义的属性,可以在js的DOM操作中通过dataset属性来获取。相同的data-name属性,是为了动态的获取数据 <input type='text' ...

    寥寥几行代码实现微信小程序表单数据的双向绑定,直接上代码

    //wxml
    //data-name属于自定义的属性,可以在js的DOM操作中通过dataset属性来获取。相同的data-name属性,是为了动态的获取数据
    <input type='text' placeholder='请输入你的密码' data-name='userName' bindinput='gainImportValue'/>
    <input type='password' placeholder='请输入你的密码' data-name='passWord' bindinput='gainImportValue'/>
    
    //js
    Page({
      data:{
        userName:"",
        passWord:""
      },
    gainImportValue(e){
        const name=e.currentTarget.dataset.name;//哪一个输入框的数值发生改变,e这个对象就是指谁。
        const obj={};
        obj[name]=e.detail.value;//通过此方法为对象动态的设置属性
        this.setData(obj);//这样就实现了数据的双向绑定
    }
    })
    
    
    展开全文
  • 组件,其他节点不会显示。 picker-view-column 仅可放置于 中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致。 示例代码: < view > < view > {{year}}年{{...

    picker-view


    嵌入页面的滚动选择器

    属性名 类型 说明 最低版本
    value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。  
    indicator-style String 设置选择器中间选中框的样式  
    indicator-class String 设置选择器中间选中框的类名 1.1.0
    bindchange EventHandle 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)  

    注意:其中只可放置<picker-view-column/>组件,其他节点不会显示。

    picker-view-column

    仅可放置于<picker-view />中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致。

    示例代码:

    <view>
      <view>{{year}}年{{month}}月{{day}}日</view>
      <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
        <picker-view-column>
          <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
        </picker-view-column>
      </picker-view>
    </view>
    
    const date = new Date()
    const years = []
    const months = []
    const days = []
    
    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    
    for (let i = 1 ; i <= 12; i++) {
      months.push(i)
    }
    
    for (let i = 1 ; i <= 31; i++) {
      days.push(i)
    }
    
    Page({
      data: {
        years: years,
        year: date.getFullYear(),
        months: months,
        month: 2,
        days: days,
        day: 2,
        year: date.getFullYear(),
        value: [9999, 1, 1],
      },
      bindChange: function(e) {
        const val = e.detail.value
        this.setData({
          year: this.data.years[val[0]],
          month: this.data.months[val[1]],
          day: this.data.days[val[2]]
        })
      }
    })
    


    展开全文
  • 微信小程序表单组件 checkbox 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小...
  • 微信小程序 表单 form 组件.pdf
  • 微信小程序表单组件 checkboxcheckbox-group多项选择器,内部由多个checkbox组成。属性名类型默认值说明bindchangeEventHandle &lt;checkbox-group/&gt;中选中项发生改变是触发change事件,detail = {value...
  • 微信小程序表单自定义组件vest-form-master.zip
  • 微信小程序组件_小程序表单组件_小程序buttonbutton按钮。属性名类型默认值说明最低版本sizeStringdefault按钮的大小 typeStringdefault按钮的样式类型 plainBooleanfalse按钮是否镂空,背景色透明 ...
  • input微信小程序组件_小程序表单组件_小程序输入框input属性名类型默认值说明最低版本valueString 输入框的初始内容 typeString"text"input 的类型 passwordBooleanfalse是否是密码类型 placeholder...
  • 微信小程序form 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input  ...
  • 微信小程序表单验证

    2019-11-28 12:45:38
    由于微信小程序表单组件没有自带的验证功能,因此要针对每一项进行判断比较繁琐 因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接微信小程序表单验证完整代码片段 ...
  • 微信小程序组件_小程序表单组件_radio radio-group 单项选择器,内部由多个组成。 属性名 类型 默认值 说明 bindchange EventHandle 中的选中项发生变化时触发change事件,event.detail = {value: 选中项...
  • 主要介绍了微信小程序form表单组件示例代码,文章给大家提到了一些相关属性名和类型及说明,需要的朋友可以参考下
  • 微信小程序label 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input...
  • 微信小程序原生组件

    2019-11-17 18:04:15
    微信小程序原生组件组件 组件 组件是视图层的基本组成单元,自带一些功能和一些微信小程序样式,一般包括开始标签和结束标签,内容在两个标签内 小程序提供下面8类组件:(更多内容可以参考官方文档小程序原生组件官方...
  • 微信小程序form表单,将组件内的用户输入的&lt;switch/&gt; &lt;input/&gt; &lt;checkbox/&gt; &lt;slider/&gt; &lt;radio/&gt; &lt;picker/&gt; 提交。当...
  • 微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
  • 微信小程序-组件-表单组件-button

    千次阅读 2020-02-13 17:36:38
    微信小程序-组件-button-2020-2-13 1、currentTarget-传值 传值 .wxml <view data-name="{{item.name}}" data-pwd = “{{item.pwd}}” bindtap=‘login’> </view> //先学渲染列表 .js login:function...
  • 微信小程序组件_小程序表单组件_switch 开关选择器。 属性名 类型 默认值 说明 checked Boolean false 是否选中 type String switch 样式,有效值:switch, checkbox bindchange...
  • 微信小程序组件_小程序表单组件_picker 从微信小程序底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 普通...
  • 小程序中,不能使用html等标签元素,只能使用微信所提供的组件元素,组件列表如下: 视图容器 view组件 scroll-view组件 swiper组件 基础内容 icon组件 text组件 progress组件 表单组件 button...
  • 微信小程序组件_小程序表单组件label 用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for优先级高于内部控件,内部有多个控件的时候默认触发第一个...
  • 微信小程序组件_小程序表单组件_多行输入框 textarea 多行输入框。 属性名 类型 默认值 说明 value String   输入框的内容 placeholder String   输入框为空时占位符 ...
  • 微信小程序 基础组件 文章目录微信小程序 基础组件一.基础组件二.属性类型三.共同属性类型四.组件列表1. 视图容器( View Container):2. 基础内容(Basic Content):3. 表单(Form):4. 导航(Navigation):5. 多媒体(Media...
  • 本场 Chat 主要是对微信小程序中如何自定义组件来进行说明,在其中简单的 Vue 的组件之间的通信,到组件的创建、定义、页面组件之间的通信。 涉及知识: 微信小程序自定义组件创建、通信; Vue 父子组件之间的通信...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,352
精华内容 3,340
关键字:

微信小程序表单组件

微信小程序 订阅