微信小程序picker(下拉菜单)

picker

从底部弹起的滚动选择器。

<picker
 mode="selector"
 range="{{country}}" 
 value="{{index}}"
 bindchange="sel"
 >
  <view>当前选择:{{country[index]}}</view>
</picker>

  data: {
    country:['中国','美国'],
    index:0
  },
  sel(e){
    console.log(e);
    this.setData({
      index:e.detail.value// 事件后触发获取的值
    })
  }

pick-view

需要与pick-view-colomn结合使用,一个pick-view-colomn代表一列

<view bindtap="showPicker">当前选择: {{province}}--{{city}}--{{area}}</view>

<picker-view class="pickV animated {{bounceInUp}} {{goBottom}}">
  <picker-view-column>
    <view wx:for="{{allProvince}}" wx:key="index">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{allCity}}" wx:key="index">{{item}}</view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{allArea}}" wx:key="index">{{item}}</view>    
  </picker-view-column>
</picker-view>

 data: {
    province:'广东',
    allProvince:["广东省","福建省","江西省","福建省","湖南省"],
    city:"广州",
    allCity:["广州市","深圳市","珠海市","梅州市"],
    area:"天河区",
    allArea:["天河区","白云区","越秀区","荔湾区"]
  },
  showPicker(){
    if(this.data.isShow){
      this.setData({
        bounceInUp:"bounceInUp",
        goBottom:"goBottom",
        isShow:false
      })
    }else{
      this.setData({
        bounceInUp: "bounceInDown",
        goBottom: "",
        isShow:true
      })     
    }
  }