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

picker,小程序picker组件

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

picker选择器分为5种:分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器,可以用mode属性区分。属性普通选择器设置mode=selector。属性名类型默认值说明rangeArray/ObjectArray[]mode为selector或multiSelector时,range有效range-keyString当range是一个ObjectArray时,通过range-key来指定Object中key的值作为选择器显示内容valueNumber0value的值表示选择了range中的第几个(下标从0开始)bindchangeEventHandlevalue改变时触发change事件,event.detail={value:value}disabledBooleanfalse是否禁用多列选择器mode=multiSelector(最低版本:1.4.0)。属性名类型默认值说明range二维Array/二维ObjectArray[]mode为selector或multiSelector时,range有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[[“a”,”b”],[“c”,”d”]]range-keyString当range是一个二维ObjectArray时,通过range-key来指定Object中key的值作为选择器显示内容valueArray[]value每一项的值表示选择了range对应项中的第几个(下标从0开始)bindchangeEventHandlevalue改变时触发change事件,event.detail={value:value}bindcolumnchangeEventHandle某一列的值改变时触发columnchange事件,event.detail={column:column,value:value},column的值表示改变了第几列(下标从0开始),value的值表示变更值的下标disabledBooleanfalse是否禁用时间选择器时间选择器:mode=time。日期选择器日期选择器:mode=date。fields自动对应的有效值:省市区选择器mode=region(最低版本:1.4.0)。官方示例viewview普通选择器/viewpickerbindchange=”bindPickerChange”value=”{{index}}”range=”{{array}}”view当前选择:{{array[index]}}/view/picker/viewviewview多列选择器/viewpickermode=”multiSelector”bindchange=”bindMultiPickerChange”bindcolumnchange=”bindMultiPickerColumnChange”value=”{{multiIndex}}”range=”{{multiArray}}”view当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}/view/picker/viewviewview时间选择器/viewpickermode=”time”value=”{{time}}”start=”09:01″end=”21:01″bindchange=”bindTimeChange”view当前选择:{{time}}/view/picker/viewviewview日期选择器/viewpickermode=”date”value=”{{date}}”start=”2015-09-01″end=”2017-09-01″bindchange=”bindDateChange”view当前选择:{{date}}/view/picker/viewviewview省市区选择器/viewpickermode=”region”bindchange=”bindRegionChange”value=”{{region}}”custom-item=”{{customItem}}”view当前选择:{{region[0]}},{{region[1]}},{{region[2]}}/view/picker/viewPage({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:function(e){console.log(‘picker发送选择改变,携带值为’,e.detail.value)this.setData({index:e.detail.value})},bindMultiPickerChange:function(e){console.log(‘picker发送选择改变,携带值为’,e.detail.value)this.setData({multiIndex:e.detail.value})},bindMultiPickerColumnChange:function(e){console.log(‘修改的列为’,e.detail.column,’,值为’,e.detail.value);vardata={multiArray:this.data.multiArray,multiIndex:this.data.multiIndex};data.multiIndex[e.detail.column]=e.detail.value;switch(e.detail.column){case0:switch(data.multiIndex[0]){case0:data.multiArray[1]=[‘扁性动物’,’线形动物’,’环节动物’,’软体动物’,’节肢动物’];data.multiArray[2]=[‘猪肉绦虫’,’吸血虫’];break;case1:data.multiArray[1]=[‘鱼’,’两栖动物’,’爬行动物’];data.multiArray[2]=[‘鲫鱼’,’带鱼’];break;}data.multiIndex[1]=0;data.multiIndex[2]=0;break;case1:switch(data.multiIndex[0]){case0:switch(data.multiIndex[1]){case0:data.multiArray[2]=[‘猪肉绦虫’,’吸血虫’];break;case1:data.multiArray[2]=[‘蛔虫’];break;case2:data.multiArray[2]=[‘蚂蚁’,’蚂蟥’];break;case3:data.multiArray[2]=[‘河蚌’,’蜗牛’,’蛞蝓’];break;case4:data.multiArray[2]=[‘昆虫’,’甲壳动物’,’蛛形动物’,’多足动物’];break;}break;case1:switch(data.multiIndex[1]){case0:data.multiArray[2]=[‘鲫鱼’,’带鱼’];break;case1:data.multiArray[2]=[‘青蛙’,’娃娃鱼’];break;case2:data.multiArray[2]=[‘蜥蜴’,’龟’,’壁虎’];break;}break;}data.multiIndex[2]=0;console.log(data.multiIndex);break;}this.setData(data);},bindDateChange:function(e){console.log(‘picker发送选择改变,携带值为’,e.detail.value)this.setData({date:e.detail.value})},bindTimeChange:function(e){console.log(‘picker发送选择改变,携带值为’,e.detail.value)this.setData({time:e.detail.value})},bindRegionChange:function(e){console.log(‘picker发送选择改变,携带值为’,e.detail.value)this.setData({region:e.detail.value})}})

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏