学习移动端组件 Picker一下

原文: https://www.luoyangfu.com/art...

前言

一个移动端的touch 事件或者 mouse 事件，具体看看怎么玩。

先看看效果:

这里年月日都是使用创建好的Picker组件来实现的，在之前感谢博客园 @糊糊糊糊糊了 , 原文地址 .

原文中讲了实现Picker核心思路，我也是受益颇多，然后根据思路以及 Github源码 ，终于写了自己想要的Picker，于是就有了记录，再次感谢.

单独Picker

HTML 结构

开发这个Picker, 观察Picker节点结构，Picker 是由定高隐藏元素的块， 一个定高不隐藏元素的的块，以及一个选择列表组成这三个部分。我们得知了这个Picker组成后很容易就可以写出来下面HTML的结构:

<div class="picker">
    <div class="picker-wrapper" id="wrapper">
        <div>2016</div>
        <div>2017</div>
        <div>2018</div>
        <div>2019</div>
        <div>2020</div>
    </div>
    <div class="center-highlight"></div>
</div>

这个就是最简单的 picker 结构了。

CSS 样式

咱们给这块结构添加样式，显示如下， 在这里我们默认元素的高度在css 中写死为 50px .

我们这里就写了关于 Picker 基础样式。

.picker {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.picker-wrapper {
  overflow: visible;
  height: calc(50px * 3);
}

.picker-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #999;
}

.picker-item.active {
  color: #000;
}

.picker-center-highlight {
  height: 50px;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -25px;
  z-index: 2;
}

.picker-center-highlight::before, .picker-center-highlight::after {
  content: '';
  display: block;
  height: 2px;
  background-color: #000;
  width: 100%;
  transform: scaleY(0.5);
  position: absolute;
}

.picker-center-highlight::before {
  top: 0;
}

.picker-center-highlight::after {
  bottom: 0;
}

上面仅仅仅仅包含图片样式组成，后续会逐渐添加各种样式。

初始化Picker组件

已经有了基本的 Picker 组件，现在我们开始进行一个初始化。让第一个元素显示在正确的位置。

这里有两个基本问题需要先考虑一下：

• 元素的移动范围
• 元素的下标和位置交换

元素的移动范围

我们元素移动范围用下标来说的话，应该是 1 到 length , 这里length 就是传入Picker数据长度。

因为我们第一个元素需要向下移动一列，所以第一列应该是空的, 这个时候位置也是我们位移 最大位置 。当不断将Picker 向上位移什么时候为最小的位置呢？应该是有这样计算 (length - Math.ceil(count / 2)) * 50 . 这里我们说的是显示 3列 情况, length 为数据长度， 50为单个Picker高度，上文已有。

下面直接看元素结算范围:

const getMoveRange = function() {
  const max = Math.floor(visibleCount / 2) * itemHeight;
  const min = (itemLength - Math.ceil(visibleCount / 2)) * -itemHeight;
  return [min, max]
}

这里就解决了第一个元素的范围问题。

这里使用两个数学函数:

Math.floor 取不大于该数的最大整数

Math.ceil 取不小于该数的最小整数

元素的下标和位置交换

这里需要两个函数分别来计算使用下标获取位置，使用位置来获取下标的。

通过下标获取元素位置时候有一点需要注意的是，我们元素位置是需要根据当前显示的个数进行偏移的，也就说，在计算之前，需要减去偏移量。偏移量刚好等于 Math.floor(count / 2) 。

const getTranslByIndex = function(index) {
  const offset = Math.floor(visibleCount / 2)
  
  if(index >= 0) {
    return (index - offset) * -itemHeight
  }
}

通过位移获取元素位置就简单很多了。

const getIndexByTransl = function(transl) {
  transl = Math.round(transl / itemHeight) * itemHeight;
  const index = - (transl - Math.floor(visibleCount / 2) * itemHeight) / itemHeight;
  
  return index;
}

计算用了三行代码， 第一行主要是转化当前位置靠近哪一个元素，得到具体translate，第二行 计算具体的 index， 这里计算语句前面使用 - 减号， 主要因为 translate 减去显示个数的1/2后，总是负值，这里需要将负值转正，也可以使用 Math.abs 来替代。

上面我们就解决了两个问题。

初始化组件

首先需要组件初始化为上图的样子，这个时候，我们开始监听事件，这了我们主要监听 touchstart, touchmove, touchend 事件。

const translateEl = function(transl) {
  el.style.transform = `translateY(${transl}px)`;
};

const setSelectedEl = function(index) {
  Array.prototype.forEach.call(pickerItems, (item, idx) => {
    item.classList.remove("active");
  });
  pickerItems[index].classList.add("active");
};

function initEvent() {
  el.addEventListener("touchstart", function(e) {
    console.log("touchstart", e);
  });
  el.addEventListener("touchmove", function(e) {
    console.log("touchmove", e);
  });
  el.addEventListener("touchend", function(e) {
    console.log("touchenv", e);
  });
}

window.onload = function onload() {
  translateY = getTranslByIndex(0);
  setSelectedEl(0);
  translateEl();
  initEvent();
};

上面的 pickerItems 就是选中的picker 元素集合.

这里就对元素进行了touchstart，touchmove, touchend 监听。下面我进一步对事件做处理，让picker动起来。

为了让picker 在移动过程中有过度效果，增加如下css

.picker-wrapper {
    overflow: visible;
    height: calc(50px * 3);
    transition: all 0.3s ease-in-out; /* 这里就对 元素做了过渡动画处理*/
}

开始对事件进行处理

el.addEventListener('touchstart', function(e) {
    startAt = Date.now();
    startTop = e.touches[0].pageY;
    // 开始滚动的位置
    startTranslateY = translateY;
  });
  el.addEventListener('touchmove', function(e) {
    const deltaY = e.touches[0].pageY - startTop;
    translateY = startTranslateY + deltaY;
    velocityTranslate = translateY - prevTranslateY || translateY;

    prevTranslateY = translateY;
    translateEl();
  });
  el.addEventListener('touchend', function(e) {
    let momentumTranslate = 0;
    // 小于 300 就开始弹性滚动
    if (Date.now() - startAt < 300) {
      momentumTranslate = translateY + velocityTranslate * momentumRatio;
    }

    let translate = Math.round(translateY / itemHeight) * itemHeight;

    if (momentumTranslate) {
      translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
    }

    const range = getMoveRange();
    translateY = Math.max(Math.min(translate, range[1]), range[0]);
    translateEl();
    const index = getIndexByTransl(translateY);
    setSelectedEl(index);
  });

  // 每个item 点击生效
  Array.prototype.forEach.call(pickerItems, function(item, index) {
    item.addEventListener('click', function(e) {
      setSelectedEl(index);
      translateY = getTranslByIndex(index);
      translateEl();
    });
  });

这里就对触摸事件做了处理，也对单个元素的点击做了监听。

const el = document.querySelector('#wrapper');
const itemHeight = 50;
const visibleCount = 3;
const itemLength = 5;
const pickerItems = document.querySelectorAll('.picker-item');
let startAt = Date.now();
let startTop = 0;
let translateY = 0;
let startTranslateY = 0;
let prevTranslateY = 0;
// 动力参数
let momentumRatio = 7;
// 速度速度位移
let velocityTranslate = 0;

这里再开头申明了一些内容，主要说明一下 momentumRatio 和 velocityTranslate 这两个，前者是动力系数用于短时间修改位移后惯性移动，后者是速度位移用于在用户移动过程中移动的量。

现在就完成了一个基本的Picker。看图:

最后

目前只是一个最基本的例子。如果说需要选择两侧有一个缩放呢。