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

picker-view是官方的一个选择器组件

支持多级选择 当然也可以单项选择 我们先来看看是个什么东西吧

简单写一个

wxml代码

html 复制代码
<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定义一个事件

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

然后 界面效果就是这样的

我们可以鼠标往上拖 例如 我们第二个选择B

当我们鼠标拖动后 松开那一刻 pickerChange就会触发

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

然后这里 我们可以通过wx:for 来循环多数据上去

相关推荐
XiaoLeisj1 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
励志成为嵌入式工程师2 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
捕鲸叉3 小时前
创建线程时传递参数给线程
开发语言·c++·算法
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
A charmer3 小时前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq3 小时前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
记录成长java4 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet