picker-view 是微信小程序中的一个表单组件,允许用户通过滚动来选择内容。下面是一个简单的 picker-view 示例:
<view class="container">
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 200px;" value="{{multiIndex}}" bindchange="bindMultiPickerChange">
    <picker-view-column>
      {{multiArray[0]}}
    </picker-view-column>
    <picker-view-column>
      {{multiArray[1]}}
    </picker-view-column>
    <picker-view-column>
      {{multiArray[2]}}
    </picker-view-column>
  </picker-view>
</view>

在对应的 .js 文件中,你需要定义 multiArray、multiIndex 和 bindMultiPickerChange:
Page({
  data: {
    multiArray: [['选项1', '选项2', '选项3'], ['子选项1', '子选项2', '子选项3'], ['子子选项1', '子子选项2', '子子选项3']],
    multiIndex: [0, 0, 0],
  },

  bindMultiPickerChange: function (e) {
    this.setData({
      multiIndex: e.detail.value,
    });
  },
});

在这个示例中,multiArray 是一个二维数组,分别表示 picker-view 的三个列。multiIndex 表示当前选择的项的索引。

你可以根据实际需求修改 multiArray 和处理选择变化的函数 bindMultiPickerChange。这个组件的灵活性允许你创建多种多样的滚动选择器。


转载请注明出处:http://www.zyzy.cn/article/detail/807/微信小程序