微信小程序+Vant组件使用Picker实现不同内容选择。

在开发小程序过程中，避免不了使用一些UI组件库来增加用户体验，例如Vant、ColorUi等。接下来我要讲的是我在实际开发过程中使用组件库遇到的一些问题。

项目的需求是要做一个不同品牌内容的选择，我使用的是Vant中的picker选择器.

 

话不多说，直接上代码：

1、引入小程序版Vant---https://vant-contrib.gitee.io/vant-weapp/ 具体操作看开发指南。

2、wxml:

<view class="wrap">
<view class="phone" bindtap="changePhone"  style='color:{{color}};font-size: 26rpx;'>
{{phoneName ? phoneName : '手机机型:'}}
</view>
<view class="one">
    <van-picker 
    columns="{{ columns }}"
     bind:change="onChange"
     wx:if="{{show_music}}" 
     show-toolbar    //	是否显示顶部栏
     bind:confirm="confirm"    //确认事件
     bind:cancel="cancel"     //取消事件
       />
</view>
</view>

3、js:

Page({
    data:{
    show:false,
    phoneName:'',
    index:'',
    color:'#ccc'
    columns:['小米','苹果','三星','华为']
}
  onChange(e){
  console.log(e);
   this.setData({
        phoneName:e.detail.value,   //选中值
         index:e.detail.index     //选中索引
})    
  cancel(){
    this.setData({
        show:false,
        color:'#ccc'
    })
   },
   confirm(){
    this.setData({
        show:false,
        color:'#000'
    })
})

避坑：van-picker标签需要手动添加宽和高，才能正常显示内容！！