微信小程序 picker-view 组件构建一个上下拖动选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序 picker-view 组件构建一个上下拖动选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

picker-view是官方的一个选择器组件
支持多级选择当然也可以单项选择我们先来看看是个什么东西吧
简单写一个
wxml代码

<view>
  <picker-view bindchange="pickerChange" style="width: 300rpx; height: 200rpx; font-size: 20px;">
    <!-- picker-view 的子组件 picker-view-column 表示选择器的一列 -->
    <picker-view-column>
      <!-- picker-view-column 的子组件 picker-view-column-item 表示选择器的一项 -->
      <picker-view-column-item>选项1</picker-view-column-item>
      <picker-view-column-item>选项2</picker-view-column-item>
      <picker-view-column-item>选项3</picker-view-column-item>
    </picker-view-column>
    <picker-view-column>
      <picker-view-column-item>选项A</picker-view-column-item>
      <picker-view-column-item>选项B</picker-view-column-item>
      <picker-view-column-item>选项C</picker-view-column-item>
    </picker-view-column>
  </picker-view>
</view>

js定义一个事件

Page({
  data: {
  },
  onLoad: function () {
  },
  pickerChange(e) {
    // 通过 e.detail.value 获取选择器当前选中的索引值
    const value = e.detail.value;
    console.log("选择器的值：", value);
  }
});

然后界面效果就是这样的
微信小程序 picker-view 组件构建一个上下拖动选择器,javascript,前端,开发语言
我们可以鼠标往上拖例如我们第二个选择B

当我们鼠标拖动后松开那一刻 pickerChange就会触发
他会给你一个数组里面就对应你的子项那么第一个还停在第一项对应下标0 第二个被我们移动到了 B位置就是第二个元素 1下标