微信小程序组件（七）picker选择器-打造最快的搜索体验

转微信小程序组件（七）picker选择器

超哥 js 2018-03-30 2117 发表评论

再记录一各微信小组件picker的使用。picker是从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分：

①普通选择器 mode = selector （默认为普通）

②多列选择器 mode = multiSelector（最低版本：1.4.0）

③时间选择器 mode = time

④日期选择器 mode = date

⑤省市区选择器 mode = region（最低版本：1.4.0）

1.首先介绍普通选择器，效果图如下↓

点击普通选择器下面区域，初始值为“美国”，选择变化后，当前选择区域进行更新。

（1）wxml中代码段如下，bindchange绑定的bindPickerChange函数在js中实现，range属性为选择器可选择的选项，value值为初次加载时的默认选择；

[xml] view plaincopy
<view class="section">  
  <view class="section__title">普通选择器</view>  
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
    <view class="picker">  
      当前选择：{{array[index]}}  
    </view>  
  </picker>  
</view>  

（2）普通选择器相关的js代码段

①选择项为array中的各项，“美国、中国...”，初始值index默认为0，因此初次选项为“美国”。若index初始化为1，初始选项为“中国”。（即为array中的索引对应）

②bindPickerChange当选择器发生变化时触发，在本例中在控制台输出变化信息，由e传入；同时使用setData函数更改index值，“当前选择”区域更新为新的array[index]。

[javascript] view plaincopy
Page({  
  data: {  
    array: ['美国', '中国', '巴西', '日本'],  
    index: 0,  
  },  
  bindPickerChange: function (e) {  
    console.log('picker发送选择改变，携带值为', e.detail.value)  
    this.setData({  
      index: e.detail.value  
    })  
  }  
})  

（3）普通选择器属性值

属性名	类型	默认值	说明
range	Array / Object Array	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用

2.多列选择器，效果图↓

第一列选定时第二列值进行更新，选择第二列值时第三列值相应更新

（1）wxml中代码 ↓

①bindchange绑定方法bindMultiPickerChange为多列选择后，点击“确定”后触发；

②bindcolumnchange绑定方法bindMultiPickerColumnChange为每一列发生变化时触发，可用于识别发生变化的列；

③multiArray[i]为第i列的待选择数组，multiIndex[i]为第i列被选中的值。

[xml] view plaincopy
<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>  

（2）js中多列选择器相关代码↓

①bindMultiPickerChange与bindPickerChange函数类似；

②bindMultiPickerColumnChange函数，首先声明变量data记录multiArray和multiIndex；e.datail.column记录变化的列索引，e.detail.value记录变化后的值。我们用switch方法根据变化的列索引进行响应数据更新。如当第0列变化时，首先判断第0列的选定值multiIndex[0],如果为0，将第1列的待选值multiArray[1]更新为“扁性动物，线性动物...”,第2列待选值multiArray[2]更新为“猪肉绦虫...”；并将第1、2列的默认选值都置为0。最后this.setData(data);更新多列选择器的选中值。

[javascript] view plaincopy
Page({  
  data: {  
    array: ['美国', '中国', '巴西', '日本'],  
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],  
    multiIndex: [0, 0, 0],   
  },  
     
  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);  
    var 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;  
        console.log(data.multiIndex);  
        break;  
    }  
    this.setData(data);  
  }   
})  

（3）多列选择器属性

属性名	类型	默认值	说明
range	二维Array / 二维Object Array	[]	mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如`[["a","b"], ["c","d"]]`
range-key	String		当 range 是一个二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Array	[]	value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
bindcolumnchange	EventHandle		某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标
disabled	Boolean	false	是否禁用

3.时间选择器，效果图↓与多列选择器类似，但只需开发者指定开始时间与结束时间，微信自动填充了待选择队列

（1）wxml中代码↓，当用户选中start之前与end之后的时间，选择器会自动回滚到允许值。

[xml] view plaincopy
<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>  

（2）js中时间选择器代码段↓

[javascript] view plaincopy
Page({  
  data: {  
    time: '12:01',   
  },  
     
  bindTimeChange: function (e) {  
    console.log('picker发送选择改变，携带值为', e.detail.value)  
    this.setData({  
      time: e.detail.value  
    })  
  },  
     
})  

（3）时间选择器属性

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为"hh:mm"
start	String		表示有效时间范围的开始，字符串格式为"hh:mm"
end	String		表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用

4.日期选择器，与时间选择器基本类似，效果图↓，无法选择2017年12月1日之后的日期

（1）wxml中代码↓

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-12-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

（2）js中代码段↓

[javascript] view plaincopy
Page({  
  data: {  
    date: '2016-09-01',       
  },  
     
  bindDateChange: function (e) {  
    console.log('picker发送选择改变，携带值为', e.detail.value)  
    this.setData({  
      date: e.detail.value  
    })  
  },  
     
})  

（3）时间选择器属性↓

属性名	类型	默认值	说明
value	String	0	表示选中的日期，格式为"YYYY-MM-DD"
start	String		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	String		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	String	day	有效值 year,month,day，表示选择器的粒度
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用

fields 有效值：

值	说明
year	选择器粒度为年
month	选择器粒度为月份
day	选择器粒度为天

5.地区选择器，这个比较常用↓

（1）wxml中代码段↓

[xml] view plaincopy
<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>  

（2）js代码↓，地区无需手动敲入，微信内嵌。

[javascript] view plaincopy
Page({  
  data: {    
    region: ['广东省', '广州市', '海珠区'],  
    customItem: '全部'  
  },  
     
  bindRegionChange: function (e) {  
    console.log('picker发送选择改变，携带值为', e.detail.value)  
    this.setData({  
      region: e.detail.value  
    })  
  }  
})  

（3）地区选择器属性 ↓

属性名	类型	默认值	说明	最低版本
value	Array	[]	表示选中的省市区，默认选中每一列的第一个值
custom-item	String		可为每一列的顶部添加一个自定义的项	1.5.0
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用

6.最后附上完整的代码

（1）wxml

[plain] view plaincopy
<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-12-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>  

（2）js代码

[plain] view plaincopy
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: 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);  
    var 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;  
        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  
    })  
  }  
})  

（3）wxss

[plain] view plaincopy
.section {  
  margin-top: 20px;  
}  
  
.section__title {  
  text-align: center;  
  background: wheat;  
}  

原文链接：https://blog.csdn.net/Crab0314/article/details/78177579

所有评论

加载评论 ...

发表评论

转 微信小程序组件（七）picker选择器

用户登录

用户注册

转微信小程序组件（七）picker选择器