揭开picker选择器的奇妙面纱，构建极简交互

前端

2023-11-06 09:43:27

初识Picker选择器

Picker选择器，又称滚动选择器，是一种移动端常用的交互组件，允许用户在预定义选项中进行选择。它的出现极大地简化了用户在有限屏幕空间内进行选择的操作，提升了交互体验。

原理剖析

Picker选择器的核心在于模拟现实世界中的滚轮选择器。它通常由三个部分组成：

数据源： 包含要显示选项的数组或对象。
滚动区域： 显示数据源中选项的区域。
滚动条： 用户可以通过拖动或点击来滚动滚动区域，从而选择不同的选项。

实现方式

Picker选择器的实现方式有很多种，其中最为常见的是使用JavaScript和CSS来实现。

使用JavaScript实现Picker选择器

// 创建一个新的Picker选择器
const picker = new Picker({
  data: ['选项1', '选项2', '选项3'],
  selectedIndex: 0
});

// 添加事件监听器，以便在用户选择选项时触发回调函数
picker.addEventListener('change', (event) => {
  console.log(`你选择了 ${event.detail.value}`);
});

// 将Picker选择器添加到DOM中
document.body.appendChild(picker);

使用CSS实现Picker选择器

.picker {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.picker-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.picker-option {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.picker-option--selected {
  background-color: #ccc;
}