表单组件Form提交之蛋疼的___picker普通选择器模式

  • • 发表于 8年前
  • • 作者 夏
  • • 8735 人浏览
  • • 21 条评论
  • • 最后编辑时间 8年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

picker### 相信大家都非常熟悉select下拉框,那么小程序对应的下拉框组件是谁呢,有请今天的主角:picker闪亮登场!

第一次在咱这论坛发帖,有点小紧张…

官方是这样描述picker的


普通选择器有自带三个必要属性:

1、range 主要指服务端返回的数据集(也可自定义数据),类型为Array。
2、value 主要指range数组的下标,类型为Number。
3、bindchange 主要指改变选项时触发的事件。其中event.detail.value可获取自身value的值。

普通选择器的自我表现:

1、由于range属性值为整个下拉选项的数据集及value为range的下标,所以要显示当前选项即:{{array[index]}}。
2、下拉选项弹层的样式为底部弹出,如下图。

该聊聊蛋疼的地方了:

picker通过form提交的时候,肯定提交的是自己的value,那么就相当于永远提交的是0、1、2、3、4、5…… 这样的话问题就来了,咱们要这些个0123有个毛用?例如服务端返回这样的数据:
show_arr = [ //定义假数据
{ “id” : “a6745” , “name”:”Bill” },
{ “id” : “b4433” , “name”:”George” },
{ “id” : “c5674” , “name”:”Thomas” },
{ “id” : “d5543” , “name”:”jack” },
{ “id” : “e7554” , “name”:”tim” }
];
这样每次选择名字之后,我想提交的是对应的id。例如选择jack那么我想传递d5543,这个是我们想要的,可是现在总给我们返回012345……这是什么鬼???

见证奇迹的时刻到了:

先上图:

html代码:
<block wx:for="{{show_arr}}">
    <text id="show">id:{{item.id}}===>name:{{item.name}}
</text>
</block>
<form bindsubmit="formSubmit">
    <picker name="selector" bindchange="bindPickerChange" value="{{picker_index}}" range="{{picker_arr}}">
        <button>请选择</button>
    </picker>
    <button class="selected">{{picker_arr[picker_index]}}</button>
    <button class="submit" formType="submit">form提交</button>
</form>
<button class="result">结果为:{{result}}</button>

css代码:

#show{
    text-align: center;
    font-size: 60rpx;
    display: block;
    color:#fff;
    background-color: green;
    padding:10rpx 0;
}
.selected{
    background-color: pink;
}
.submit{
    background-color: yellow;
}
.result{
    background-color: red;
}

js代码:

Page({
  data:{
    show_arr:[],//展示所有假数据
    picker_arr:[],//picker中range属性值
    picker_index:0,//picker中value属性值
    id_arr:[],//存储id数组
    result:''//form提交最终结果
  },
  onLoad:function(options){
    var picker_arr = [],
        id_arr     = [],
        show_arr = [  //定义假数据
          { "id" : "a6745" , "name":"Bill"   },  
          { "id" : "b4433" , "name":"George" },  
          { "id" : "c5674" , "name":"Thomas" },  
          { "id" : "d5543" , "name":"jack" },  
          { "id" : "e7554" , "name":"tim" }
        ];

    show_arr.forEach(function(e){
      picker_arr.push(e.name);
      id_arr.push(e.id);
    })
    this.setData({show_arr:show_arr,picker_arr:picker_arr,id_arr:id_arr});
  },
  bindPickerChange: function(e) {//选项改变触发事件
    this.setData({
      picker_index: e.detail.value
    })
  },
  formSubmit:function(e){//表单提交触发事件
    var result = this.data.id_arr[e.detail.value.selector];
    this.setData({result:result});
  }
})
分享到:
21条评论
Ctrl+Enter
作者

夏

APP:1 帖子:2 回复:5 积分:103

已加入社区[2877]天

指着小程序火一把

作者详情》
Top