学习笔记——微信小程序下拉选项框的实现

、在微信小程序中实现下拉选项框可以使用微信 原生组件picker，

<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange">
       <view class="picker">
        {{array[index]}}
       </view> 
</picker>

 代码中通过range="{{array}}"和value="{{index}}"来绑定下拉选项框的可选数组与其对应的索引，当改变下拉选项框对应的值时，会触发bindchange事件，调用bindpickerchange函数

data: {
    array: ['柴油', '汽油', ],
    index: 0,
}，
bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
});

 页面会将data部分的数据转化成初始的wxml页面数据，即页面初始数据为“柴油”，选择器更变数据是会触发bindpickerchange函数，将更改后的值写入页面

代码运行结果如下