官方api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

上边是官网的api。小程序中，底部下拉滚动选择主要有这几种

　　下拉选择，时间选择，城市选择，多项选择。

1.index.js中：

//index.js//获取应用实例const app = getApp()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    })  }})

2.index.wxml中：

       
      
       普通选择器：
        
          
       
              当前选择：{
    {array[index]}}    
         
      
     
       
      
       多列选择器：
        
          
       
              当前选择：{
    {multiArray[0][multiIndex[0]]}}，{
   {multiArray[1][multiIndex[1]]}}，{
   {multiArray[2][multiIndex[2]]}}    
         
      
     
       
      
       时间选择器：
        
          
       
              当前选择: {
    {time}}    
         
      
     
       
      
       日期选择器：
        
          
       
              当前选择: {
    {date}}    
         
      
     
       
      
       省市区选择器：
        
          
       
              当前选择：{
    {region[0]}}，{
   {region[1]}}，{
   {region[2]}}    
         
      
     

3.index.wxss中：

.section__title {  margin: 20rpx;}.section {  width: 100%;  font-size: 35rpx;  margin: 10rpx;  color: #000;}.picker {  color: #6BD44E;}