E企盈营销工具技术服务商 热线:4006-838-530

微信小程序学习之路——表单组件

E企盈直播平台营销卖货系统

radio组件1.radio-group在小程序中<radio/>不能单独使用,同一组<radio/>需要包含在一个<radio group/>中,这样才能形成一组单项选择按钮,<radio/>的选中态不能直接获取,需要通过<radio-group>的change事件进行获取。<radio-group>内部可以包含其他标签,且不受影响。bindchange:绑定<radio-group/>change事件,<radio-group/>中的选中项发生变化时触发change事件,event.detail={value:选中项radio的value}2.radio<radio/>是<radio-group/>中的一个单选按钮,属性如下:属性名类型默认值说明最低版本valueString <radio> 标识。当该<radio> 选中时,<radio-group> 的 change 事件会携带<radio>的value checkedBooleanfalse当前是否选中 disabledBooleanfalse是否禁用 colorColor radio的颜色,同css的color aria-labelString 无障碍访问,(属性)元素的额外描述 2.5.0 示例代码如下:<radio-group class=”radio-group” bindchange=”radioChange”>  <label class=”radio” wx:for=”{{items}}”>    <radio value=”{{item.name}}” checked=”{{item.checked}}” />    {{item.value}}  </label></radio-group>Page({  data: {    items: [      { name: ‘USA’, value: ‘美国’ },      { name: ‘CHN’, value: ‘中国’, checked: ‘true’ },      { name: ‘JPN’, value: ‘日本’ },      { name: ‘ENG’, value: ‘英国’ },    ]  },  radioChange(e) {    console.log(‘radio发生change事件,携带value值为:’, e.detail.value)  }})执行结果如下:checkbox组件与单选框一样,小程序中的复选也是由<checkbox-group/>(多项选择器)和<checkbox/>(多选项目)两个组件组合而成。1.checkbox-group用于包裹<checkbox/>,而且仅有一个属性bindchange:<checkbox-group>中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]}2.checkbox<checkbox/>是<checkbox-group/>中的一个多选项目,它的属性和<radio/>一样:属性名类型默认值说明最低版本valueString <checkbox>标识,选中时触发<checkbox-group>的 change 事件,并携带 <checkbox> 的 value disabledBooleanfalse是否禁用 checkedBooleanfalse当前是否选中,可用来设置默认选中 colorColor checkbox的颜色,同css的color aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0 示例代码如下:<checkbox-group bindchange=”checkboxChange”>  <label class=’checkbox’ wx:for='{{items}}’>    <checkbox value='{{item.name}}’ checked='{{item.checked}}’>{{item.value}}</checkbox>  </label></checkbox-group>Page({  data:{    items:[      { name: ‘USA’, value: ‘美国’ },      { name: ‘CHN’, value: ‘中国’, checked: ‘true’ },      { name: ‘BRA’, value: ‘巴西’ },      { name: ‘JPN’, value: ‘日本’ },      { name: ‘ENG’, value: ‘英国’ }    ]  },  checckboxChange(e){    console.log(‘checkbox发生change事件,value为:’,e.detail.value)  }})执行结果如下:switch组件<switch/>是一个可以在两种状态切换的开关选择器,现在很多APP都在使用,最常见的是IOS或Android开关,switch属性如下:属性名类型默认值说明最低版本checkedBooleanfalse是否选中 disabledBooleanfalse是否禁用 typeStringswitch样式,有效值:switch, checkbox bindchangeEventHandle checked 改变时触发 change 事件,event.detail={ value:checked} colorColor switch 的颜色,同 css 的 color aria-labelString 无障碍访问,(属性)元素的额外描述示例代码如下:<view class=”body-view”>  <switch checked bindchange=’switchChange1’/>  <switch bindchange=’switchChange2’/></view>Page({  data:{    switchChange1(e){      console.log(‘switch1发生change事件,携带值为:’,e.detail.value)    },    switchChange2(e){      console.log(‘switch1发生change事件,携带值为:’, e.detail.value)    }  }})执行结果如下:label组件用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。目前可以绑定的控件有<button/>、<checkbox/>、<radio/>、<switch/>,小程序中<label/>触发的规则有两种:将控件放在标签内,当用户点击时触发中的第一个控件设置<label/>的for属性,当用户点击时触发for属性对应的控件,for属性优先级高于内部控件<label/>只有一个for属性,绑定控件的id,如下示例:<view class=”section”>  <checkbox-group bindchange=”checkboxchange”>    <label>      <checkbox value=’value-1’/>点击文案也能选中      </label>  </checkbox-group></view><view class=’section’>  <label>    <switch/>点击文案切换开关  </label></view><view class=’section’>  <view class=’title’>选中元素内的第一个</view>  <checkbox-group>    <label>      <checkbox value=’value-1′>第一个</checkbox>      <checkbox value=’value-2′>第二个</checkbox>      <checkbox value=’value-3′>第三个</checkbox>      <checkbox value=’value-4′>第四个</checkbox>    </label>  </checkbox-group></view><view class=’section’>  <view class=’title’>for属性优先级大于内部属性</view>  <checkbox-group>    <label for=’mycheckbox’>    <checkbox>内部元素</checkbox>    <checkbox>内部元素</checkbox>    </label>  </checkbox-group></view>Page({  checkboxchange:function(event){    console.log(event.detail.value)  }}).section{font-size: 12px;padding: 20px 10px;border-top: solid 1px rgb(212, 122, 122);}.section.title{padding: 5px 0;margin-bottom: 5px;display: block;}.section input{border:solid 1px rgb(110, 15, 79);background-color: rgb(107, 49, 102)}执行结果如下:在实际项目中,一个<label/>尽量只包裹一个组件。slider组件滑动选择器时一种在移动端常用的交互组件,我们手机上的亮度调节就是一个滑动选择器,小程序中只提供了水平的滑动选择器,属性如下:属性名类型默认值说明最低版本minNumber0最小值 maxNumber100最大值 stepNumber1步长,取值必须大于 0,并且可被(max – min)整除 disabledBooleanfalse是否禁用 valueNumber0当前取值 colorColor#e9e9e9背景条的颜色(请使用 backgroundColor) selected-colorColor#1aad19已选择的颜色(请使用 activeColor) activeColorColor#1aad19已选择的颜色 backgroundColorColor#e9e9e9背景条的颜色 block-sizeNumber28滑块的大小,取值范围为 12 – 281.9.0block-colorColor#ffffff滑块的颜色1.9.0show-valueBooleanfalse是否显示当前 value bindchangeEventHandle 完成一次拖动后触发的事件,event.detail = {value: value} bindchangingEventHandle 拖动过程中触发的事件,event.detail = {value: value}1.7.0aria-labelString 无障碍访问,(属性)元素的额外描述2.5.0示例如下:<view class=”section icon-wrapper”>  <icon type=’success’size=”{{icon.size}}”style=”opacity:{{icon.opacity/20}};”></icon></view><view class=’section’>  <view>调整图标大小:</view>  <slider show-value max=’100′ min=’10’ step=’5′ value='{{icon.size}}’ bindchange=’changeSize’></slider></view><view class=’section’>  <view>调整透明度:</view>  <slider show-valuemax=”10″ min=”0″ step=”1″ value=”{{icon.opacity}}” bindchange=”changeOpacity”></slider></view>.section{padding: 10px;}.section.icon-wrapper {height: 100px;font-size: 12px;}Page({  data:{    icon:{      size:20,      opacity:8    }  },  /**改变大小 */  changeSize:function(e){    this.data.icon.size=e.detail.value;    this.setData(this.data);  },  /**改变透明度*/  changeOpacity:function(e){    this.data.icon.opacity=e.detail.value;    this.setData(this.data);  }});执行结果如下:picker组件<picker/>可以在屏幕底部弹出一个窗口,供用户在所提供的选择项中选择一个,<picker/>主要分为3种类型:普通选择器、时间选择器和日期选择器,但我们还会将一些其他选择器1.普通选择器属性名类型默认值说明最低版本rangeArray / Object Array[]mode为 selector 或 multiSelector 时,range 有效 range-keyString 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 valueNumber0value 的值表示选择了 range 中的第几个(下标从 0 开始) bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} disabledBooleanfalse是否禁用 bindcancelEventHandle 取消选择或点遮罩层收起 picker 时触发1.9.90示例代码如下:<picker value=”{{selectedIndex}}” range=”{{list}}” bindchange=”change”>  <view class=’picker’>    当前选中:{{list[selectedIndex]}}  </view></picker>.picker{border:solid 1px #ddd;background-color: #fafafa;padding: 10px;}Page({  data:{    list:[      ‘周杰伦’,      ‘林宥嘉’,      ‘华晨宇’,      ‘beyond’,      ‘DJ小可’    ],    selectedIndex:0  },  change:function(e){    this.setData({      selectedIndex:e.detail.value    });  }});执行结果如下:2.时间选择器属性名类型默认值说明最低版本valueString 表示选中的时间,格式为”hh:mm” startString 表示有效时间范围的开始,字符串格式为”hh:mm” endString 表示有效时间范围的结束,字符串格式为”hh:mm” bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} bindcancelEventHandle 取消选择时触发1.9.90disabledBooleanfalse是否禁用 实例代码入下:<picker value=”{{selectTime}}” mode=”time” start=”{{startTime}}” end=”{{endTime}}” bindchange=”change”><view class=’picker’>  当前选中:{{selectTime}}</view></picker>.picker{border:solid 1px #ddd;padding: 10px;}Page({  data:{  startTime:”00:00″,  endTime:”24:00″,  selectTime:”11:30″  },  change:function(e){    this.setData({      selectTime:e.detail.value    })  }});执行结果如下:3.日期选择器valueString0表示选中的日期,格式为”YYYY-MM-DD” startString 表示有效日期范围的开始,字符串格式为”YYYY-MM-DD” endString 表示有效日期范围的结束,字符串格式为”YYYY-MM-DD” fieldsStringday有效值 year,month,day,表示选择器的粒度 bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} bindcancelEventHandle 取消选择时触发1.9.90disabledBooleanfalse是否禁用fields 有效值:值说明year选择器粒度为年month选择器粒度为月份day选择器粒度为天实例代码如下:<picker value=”{{selectDate}}” mode=”date” start=”{{startDate}}” end=”{{endDate}}” filed=”day” bindchange=”change”><view class=’picker’>  当前选中:{{selectDate}}</view></picker>.picker{border:solid 1px #ddd;padding: 10px;}Page({  data:{  startDate:”1990-01-01″,  endDate:”2020-01-01″,  selectDate:”2019-03-30″  },  change:function(e){    this.setData({      selectDate:e.detail.value    });  }});执行结果如下:其他:多列选择器:属性名类型默认值说明最低版本range二维Array / 二维Object Array[]mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,”b”], [“c”,”d”]] range-keyString 当 range 是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 valueArray[]value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始) bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value} bindcolumnchangeEventHandle 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 bindcancelEventHandle 取消选择时触发1.9.90disabledBooleanfalse是否禁用地区选择器:属性名类型默认值说明最低版本valueArray[]表示选中的省市区,默认选中每一列的第一个值 custom-itemString 可为每一列的顶部添加一个自定义的项1.5.0bindchangeEventHandle value 改变时触发 change 事件,event.detail = {value: value, code: code, postcode: postcode},其中字段code是统计用区划代码,postcode是邮政编码 bindcancelEventHandle 取消选择时触发1.9.90disabledBooleanfalse是否禁用示例汇总代码如下:<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=”multiSelector”    bindchange=”bindMultiPickerChange”    bindcolumnchange=”bindMultiPickerColumnChange”    value=”{{multiIndex}}”    range=”{{multiArray}}”  >    <view class=”picker”>      当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}    </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><view class=”section”>  <view class=”section__title”>省市区选择器</view>  <picker    mode=”region”    bindchange=”bindRegionChange”    value=”{{region}}”    custom-item=”{{customItem}}”  >    <view class=”picker”>      当前选择:{{region[0]}},{{region[1]}},{{region[2]}}    </view>  </picker></view>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: 3,          name: ‘节肢动物’        }      ], [        {          id: 0,          name: ‘猪肉绦虫’        },        {          id: 1,          name: ‘吸血虫’        }      ]    ],    multiIndex: [0, 0, 0],    date: ‘2016-09-01′,    time: ’12:01’,    region: [‘广东省’, ‘广州市’, ‘海珠区’],    customItem: ‘全部’  },  bindPickerChange(e) {    console.log(‘picker发送选择改变,携带值为’, e.detail.value)    this.setData({      index: e.detail.value    })  },  bindMultiPickerChange(e) {    console.log(‘picker发送选择改变,携带值为’, e.detail.value)    this.setData({      multiIndex: e.detail.value    })  },  bindMultiPickerColumnChange(e) {    console.log(‘修改的列为’, e.detail.column, ‘,值为’, e.detail.value)    const 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    }    console.log(data.multiIndex)    this.setData(data)  },  bindDateChange(e) {    console.log(‘picker发送选择改变,携带值为’, e.detail.value)    this.setData({      date: e.detail.value    })  },  bindTimeChange(e) {    console.log(‘picker发送选择改变,携带值为’, e.detail.value)    this.setData({      time: e.detail.value    })  },  bindRegionChange(e) {    console.log(‘picker发送选择改变,携带值为’, e.detail.value)    this.setData({      region: e.detail.value    })  }})执行结果如下:picker-view<picker-view/>用于实现自定义滚动选择器,在<picker-view/>中我们能按自己意愿插入任意数量列,同时也能设置整个<picker-view/>样式,<picker-view-column/>用于创建列,<picker-view/>中仅可放置<picker-view-column/>,放置其他节点不会显示,属性如下:性名类型说明最低版本valueNumberArray数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。 indicator-styleString设置选择器中间选中框的样式 indicator-classString设置选择器中间选中框的类名1.1.0mask-styleString设置蒙层的样式1.5.0mask-classString设置蒙层的类名1.5.0bindchangeEventHandle当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始) bindpickstartEventHandle当滚动选择开始时候触发事件2.3.1bindpickendEventHandle当滚动选择结束时候触发事件2.3.1aria-labelString无障碍访问,(属性)元素的额外描述2.5.0 示例代码如下:<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,    year: date.getFullYear(),    months,    month: 2,    days,    day: 2,    value: [9999, 1, 1],  },  bindChange(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]]    })  }})执行结果如下:微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序学习之路——表单组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏