微信小程序开发之picker

Posted 2021-02-20 菜鸟程序员

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发之picker相关的知识，希望对你有一定的参考价值。

一、绑定简单数组

通过bindChange控制index，使得当前选择值发生改变

示例1

data: {  
        Data: [‘A‘,‘B‘], 
        Index: 0,
    }
    
<picker class="picker" bindchange="bindChange" value="{{Index}}"  range="{{Data}}">
    <view >
      当前选择：{{Data[Index]}}
    </view>
</picker>

二、绑定多维数组

通过bindChange控制index，使得当前选择值发生改变，value是真正想得到值，选择后通过index可获取并设置，name只是想显示的值，这里的id其实是index值。

这个方法经常会用到，因为我们要的实体id不会是顺序的012345...

示例2

data: {  
        Data: [{id:0,value:‘a‘,name:‘A‘ },{id:1,value:‘b‘,name:‘B‘ }], 
        Index: 0,
　　　　  currentId
    }
    
<picker class="picker" bindchange="bindChange" value="{{Index}}"  range="{{Data}}" range-key="name">
    <view >
      当前选择：{{Data[Index].name}}
    </view>
</picker>

三、选择事件

设置对应的Index，才能看到选择的选项变化

bindChange: function (event) { 
    this.setData({
      Index:event.detail.value;

    }); 
}