小程序picker简单使用

1.wxml

<view class='yh_select flex flexSb'>
  <view class='area flex alignC flexC'>
    <view class='area_text'>
      <picker class='' bindchange="areaPickerChange" value="{{areaIndex}}" range="{{areaArray}}">
        <view class="picker {{areaIndex>=0?'on':''}}">
          {{areaIndex>=0?areaArray[areaIndex]:"城市"}}
        </view>
      </picker>
    </view>
    <view class='area_sj'></view>
  </view>
  <view class='state flex alignC flexC'>
    <view class='state_text'>
      <picker class='' bindchange="statePickerChange" value="{{stateIndex}}" range="{{stateArray}}">
        <view class="picker {{stateIndex>=0?'on':''}}">
          {{stateIndex>=0?stateArray[stateIndex]:"类别"}}
        </view>
      </picker>
    </view>
    <view class='state_sj'></view>
  </view>
</view>

2.wxss

.yh_select {
  width: 400rpx;
  margin: 0 auto;
}

.flexSb {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.area, .state {
  font-size: 28rpx;
  color: #222;
  text-align: left;
  width: 140rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.flexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}

.alignC {
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.area_text, .state_text {
  max-width: 112rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area .picker, .state .picker {
  max-width: 112rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area_sj, .state_sj {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBRjM4MTE4ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBRjM4MTE5ODk2MTExRThBOUI4Q0ZCMjgyOUIxNEJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUFGMzgxMTY4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUFGMzgxMTc4OTYxMTFFOEE5QjhDRkIyODI5QjE0QkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Y/3I7AAAAZElEQVR42mJcuHDhNAYGhkwG0sB0JiCRC8SbSNAEUpsL0vgXiCOB+CQRmk5C1f5lggp8A2JfIL6DR9MdqBqQWgYmJInXQOwJpdEBhhwTPlPxuYYJnz/w+Z8FX8hB5bGGOECAAQDsdhzUIfF/ewAAAABJRU5ErkJggg==);
  width: 14rpx;
  height: 8rpx;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14rpx 8rpx;
  margin-left: 10rpx;
}

.area .on, .state .on {
  color: #ff8a00;
}

3.js

// 4/4.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 城市
    areaArray: ['上海上海上海上海上海', '北京', '深圳', '成都'],
    areaIndex: -1,
    // 类别
    stateArray: ['百货百货百货百货', '生鲜', '零食', '男装', '瓜果蔬菜瓜果蔬菜瓜果蔬菜'],
    stateIndex: -1,
  },
  // 类别
  statePickerChange: function (e) {
    this.setData({
      stateIndex: e.detail.value
    })
  },

  // 城市
  areaPickerChange: function(e) {
    this.setData({
      areaIndex: e.detail.value
    })
  },
})

4.效果

5.详情请参考（api文档）

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html