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

最新推荐文章于 2020-06-23 23:32:36 发布
最新推荐文章于 2020-06-23 23:32:36 发布
阅读量99 收藏
点赞数
原文链接：http://www.cnblogs.com/onetwo/p/6112176.html
版权
button
按钮组件。
属性名类型默认值说明
sizeStringdefault有效值default, mini
typeStringdefault按钮的样式类型，有效值primary, default, warn
plainBooleanfalse按钮是否镂空，背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标
formTypeString无有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果
注：button-hover默认为{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-submitBoolean是否返回formId用于发送模板消息
bindsubmitEventHandle携带form中的数据触发submit事件，event.detail = { value : {"name":"value"} , formId:"" }
bindresetEventHandle表单重置时会触发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

属性名类型默认值说明
valueString 输入框的内容
typeStringtextinput的类型，有效值：text,number,idcard,digit,time,date
passwordBooleanfalse是否是密码类型
placeholderString 输入框为空时占位符
placeholder-styleString 指定placeholder的样式
placeholder-classStringinput-placeholder指定placeholder的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度，设置为0的时候不限制最大长度
auto-focusBooleanfalse自动聚焦，拉起键盘。页面中只能有一个input设置auto-focus属性
focusBooleanfalse使得input获取焦点
bindchangeEventHandle 输入框失去焦点时，触发bindchange事件，event.detail={value:value}
bindinputEventHandle 除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail={value:value}，处理函数可以直接return一个字符串，将替换输入框的内容。
bindfocusEventHandle 输入框聚焦时触发，event.detail = {value:value}
bindblurEventHandle 输入框失去焦点时触发，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
属性名类型默认值说明
rangeArray[]mode为selector时，range有效
valueNumber0mode为selector时，是数字，表示选择了range中的第几个，从0开始。
bindchangeEventHandle value改变时触发change事件，event.detail= { value:value}
时间选择器：mode=time
属性名类型默认值说明
valueString 表示选中的时间，格式为"hh:mm"
 String 表示有效时间范围的开始，字符串格式为"hh:mm"
 String 表示有效时间范围的结束，字符串格式为"hh:mm"
 EventHandle value改变时触发change事件，event.detail= { value:value}
日期选择器：mode=date
属性名类型默认值说明
valueString0表示选中的日期，格式为"yyyy-MM-dd"
startString 表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
endString 表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
fieldsStringday有效值year,month,day，表示选择器的粒度
bindchangeEventHandle 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

滑动选择器
属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于 0，并且可被 (max - min) 整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
show-valueBooleanfalse是否显示当前value
bindchangeEventHandle 完成一次拖动后触发的事件，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)

 

 

转载于:https://www.cnblogs.com/onetwo/p/6112176.html

aibiba0894
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序demo：校内约；表单组件使用
03-17
活动约起来的demo：   示例代码：   免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服...
微信小程序官方文档中表单组建button部分有关function(type)中type的个人理解
diaojia9213的博客
04-27 231
官方文档关于button组件的简介 xml页面挺容易理解，但js部分起初对整体写的形式都不太理解，随着逐渐阅读代码基本理解了 xml页面代码： <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled...
微信小程序把玩（十六）form组件
FUCK
09-26 1万+
form表单组件 是提交form内的所有选中属性的值，注意每个form表单内的组件都必须有name属性指定否则提交不上去，button中的type两个submit，reset属性分别对应form的两个事件主要属性： wxml<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" > <checkbox-group na
微信小程序组件之label
qq_45906429的博客
06-23 338
效果图 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="{{checkboxItems}}"> <label&g
微信小程序的传值问题(5种)——总结
热门推荐
winne雪
03-25 1万+
一、小程序通过id属性传值 当我们在标签上添加id属性进行传值，可以在当前标签添加点击事件来获取id中的值。 1、添加 id 属性进行传值（index.wxml） <!--index.wxml--> <view class="container"> <view class="usermotto"> <!-- 传入普通字符串数值 --> ...
微信小程序组件系列：form表单讲解
03-29
form表单组件说明:  表单，将组件内的用户输入的<switch> <input/> <checkbox> <slider> <radio>  提交。  当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时，会将表单组件中...
微信小程序开发之（表单组件的使用）
06-28
内容包括添加视频播放、轮转图片、多选框、单选框、实时获取输入值、按钮提交输入控件的数据
微信小程序-媒体及表单组件demo
01-23
微信小程序-媒体及表单组件demo 用于小程序表单制作以及媒体资源交互
微信小程序form表单组件示例代码
10-18
主要介绍了微信小程序form表单组件示例代码,文章给大家提到了一些相关属性名和类型及说明，需要的朋友可以参考下
微信小程序（组件--基础内容组件）
web_only_的博客
12-04 193
【前言】 （1）icon图标组件 （2）progress进度条组件 （3）text文本组件 （4）拓展：富文本编辑器UE和UM （5）rich-text 富文本组件 一、icon图标组件 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px) 属性 类型 默认值 是否必填 作用 type string 是 icon的类型 size number/string ...
微信小程序学习笔记（三）
Mr_OOO的博客
06-22 1891
视图容器组件 view 示例代码 scroll-view 属性表 实例代码 表单组件 button 属性表 示例代码 input 属性表 实例代码 其他组件 实例代码源码 同系列文章目录视图容器组件viewview是最常用的视图容器组件，相当于HTML页面的<div>标签，推荐使用flex布局。示例代码wxml:<view class="section"> <view class="sect
【源码分析】微信小程序 - 01表单组件 - 01button - 实践
山云的专栏
08-26 495
前言：此系列，结合Demo的源码，做一些实践和讨论： 1 Demo的效果： 微信小程序给出的button的Demo效果如上： 2 源码分析： 2.1 button.js js文件里面，定义了一些变量和函数，我逐一说一下： type：这里在button的组件说明文档里面有定义： type 有效值： 值 说明 primary 绿色 default 白色 ...
小程序组件（表单组件）
cmwly的博客
02-28 2774
button(按钮) Ps： 1、button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 2、bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。 3、在bindgetphonenumber 等返回加密信息的回调中...
wx小程序碎碎念
weixin_30455365的博客
06-12 127
对button组件的例子中，js代码的一点理解 for (var i = 0; i < types.length; ++i) { (function(type) { // 循环构建目标函数 pageObject[type] = function(e) { // duck类赋方法 var key = type + 'Size' var ch...
小程序里面的一段代码
u013018357的博客
02-21 848
var types = ['default', 'primary', 'warn'] var pageObject = { data: { defaultSize: 'default', primarySize: 'default', warnSize: 'default' }} for (var i = 0; i < types.length; ++i) { (
微信小程序表单组件picker-view（嵌入页面的滚动选择器）
书写人生
01-20 4962
picker-view 嵌入页面的滚动选择器 属性名 类型 说明 最低版本 value NumberArray 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
2.3.2微信小程序表单组件 checkbox
Eric is a ....
04-22 1373
微信小程序表单组件 checkbox checkbox-group 多选项目组，内部由多个checkbox组成。 checkbox-group内只能包含checkbox 属性名 类型 默认值 说明 bindchange EventHandle   checkbox-group中选中项发生改
关于antd 日期组件只选择年份，设置mode=year无法获取value的解决办法
abc2346789的博客
12-29 3720
antd3.0后的某个版本后终于支持了只选择年份的设置。当时2.x版本的时候还不支持只选择年份，我们项目中有这个只选择年份的需求，为了ui风格的一致，只好自己撸了一个。 如今真是普天同庆！???????? 然而，事情并没有这么简单。 import React, { Component } from 'react'; import { DatePicker } from 'antd'; ...
微信小程序自定义组件动态生成表单 如何获取表单数据
最新发布
03-25
1. 在自定义组件中定义一个data，用于存储表单数据。 2. 在表单中添加各种表单元素，如text、textarea、radio、checkbox等。 3. 在表单元素中绑定事件，如input，change等，并将表单元素的值保存到data中。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值