本篇文章给人人带来的内容是关于选择器（picker）插件的完成要领引见（代码），有一定的参考价值，有需要的朋侪可以参考一下，愿望对你有所协助。

一个一般的选择器插件是异常仔细的，一步一步来形貌就是。手指滑动内容追随手指转动，当内容究竟或触顶的时刻就不能在转动而且内容要一向坚持在正确的位置上。

第一步剖析插件构造

起首要有一个插件容器，悉数插件容器包括渐变背景，选中实线，内容容器。结果类似于下面：

所以对应的代码以下:

<div class="scroller-component" data-role="component">
    <div class="scroller-mask" data-role="mask"></div>
    <div class="scroller-indicator" data-role="indicator"></div>
    <div class="scroller-content" data-role="content">
        <div class="scroller-item" data-value='1'>1</div>
        <div class="scroller-item" data-value="2">2</div>
        <div class="scroller-item" data-value="3">3</div>
        <div class="scroller-item" data-value="4">4</div>
        <div class="scroller-item" data-value="5">5</div>
        <div class="scroller-item" data-value="6">6</div>
        <div class="scroller-item" data-value="7">7</div>
        <div class="scroller-item" data-value="8">8</div>
        <div class="scroller-item" data-value="9">9</div>
        <div class="scroller-item" data-value="10">10</div>
        <div class="scroller-item" data-value="11">11</div>
        <div class="scroller-item" data-value="12">12</div>
        <div class="scroller-item" data-value="13">13</div>
        <div class="scroller-item" data-value="14">14</div>
        <div class="scroller-item" data-value="15">15</div>
        <div class="scroller-item" data-value="16">16</div>
        <div class="scroller-item" data-value="17">17</div>
        <div class="scroller-item" data-value="18">18</div>
        <div class="scroller-item" data-value="19">19</div>
        <div class="scroller-item" data-value="20">20</div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.scroller-component {
    display: block;
    position: relative;
    height: 238px;
    overflow: hidden;
    width: 100%;
}

.scroller-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

.scroller-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    z-index: 3;
    transform: translateZ(0px);
    background-image:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
        linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    background-position: top, bottom;
    background-size: 100% 102px;
    background-repeat: no-repeat;
}

.scroller-item {
    text-align: center;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
    color: #000;
}

.scroller-indicator {
    width: 100%;
    height: 34px;
    position: absolute;
    left: 0;
    top: 102px;
    z-index: 3;
    background-image:
        linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
        linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
    background-position: top, bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

.scroller-item {
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

css 代码重要作为款式展现，经由历程外链的体式格局引入。这里就不做过量的诠释。

第二步完成手指转动容器

1.增添手指触摸事宜

let component = document.querySelector('[data-role=component]')

let touchStartHandler = (e) => { }
let touchMoveHandler = (e) => { }
let touchEndHandler = (e) => { }

component.addEventListener('touchstart', touchStartHandler)

component.addEventListener('touchmove', touchMoveHandler)

component.addEventListener('touchend', touchEndHandler)

如许当手指触摸到 component 插件容器的时刻就会触发最先，挪动，完毕事宜。

2.剖析手指滑动容器挪动结果

手指上滑内容上滑，手指下拉内容下拉。只需要掌握 content 的位置修改的间隔跟手指滑动的间隔坚持一致即可。这里用到了 transform 款式的 translate3d(x, y, z) 属性。个中 x, z 坚持稳定，y的值就是手指挪动的值。

我们继承做拆解,当手指下拉时 content 位置下移就会跟手势坚持一致。也就是 y 值变大（需要注重 y 轴正方向是往下的）。手指上拉恰好与下拉上滑。当再次下拉或上拉时内容要在原本的基础上坚持稳定。因而我们需要一个全局变量 __scrollTop 保留这个值。这个值即是用户每次上拉下拉值的和，所以我们需要求出来用户每次上拉下拉的值。

拆解用户上拉的值，当用户手触摸到屏幕的时刻就会触发 touchstart 事宜，挪动的时刻会触发 touchmove 事宜。脱离的时刻会触发 touchend 事宜。用户上拉的初始值一定是触发 touchstart 时手指的位置。完毕值就是 touchend 时手指的位置。然则如许就不可以做到内容追随手指及时活动了。所以需要拆解 touchmove 事宜

touchmove 事宜会在用户手指活动的时刻不断的触发，也就相当于用户屡次极小的高低挪动。所以我们需要纪录下来用户刚最先时触摸的位置。 __startTouchTop 。用手指当前位置减去刚最先触发位置就是用户挪动的间隔 __scrollTop。细致代码以下

let content = component.querySelector('[data-role=content]') // 内容容器
let __startTouchTop = 0 // 纪录最先转动的位置
let __scrollTop = 0 // 纪录终究转动的位置
// 这个要领下面立时解说
let __callback = (top) => {
    const distance = top
    content.style.transform = 'translate3d(0, ' + distance + 'px, 0)'
}
// 这个要领下面立时解说
let __publish = (top, animationDuration) => {
    __scrollTop = top
    __callback(top)
}
let touchStartHandler = (e) => {
    e.preventDefault()
    const target = e.touches ? e.touches[0] : e
    __startTouchTop = target.pageY
}
let touchMoveHandler = (e) => {
    const target = e.touches ? e.touches[0] : e
    let currentTouchTop = target.pageY
    let moveY = currentTouchTop - __startTouchTop
    let scrollTop = __scrollTop
    scrollTop = scrollTop + moveY
    __publish(scrollTop)
    __startTouchTop = currentTouchTop
}

注重1： touchstart 必需要纪录触摸位置， touchend 可以不纪录。因为用户第一次触摸的位置和下次触摸的位置在同一个处所的能够性险些微不足道，所以需要在 touchstart 内里重置触摸位置。不然当用户从新触摸的时刻内容会闪烁

**注重2：e.preventDefault() 要领是处置惩罚某些浏览器的兼容题目而且可以进步机能。像QQ浏览器用手指下拉的时刻会涌现浏览器形貌致使要领失利。 可以参考文档 https://segmentfault.com/a/1190000014134234
https://www.cnblogs.com/ziyunfei/p/5545439.html**

上面的 touchMoveHandler 要领中涌现了 __callback 的要领。这个要领是用来掌握内容容器的位置的, __publish 要领是对转变容器位置的一层封装，可以完成跟用户的手指行动同步，也要完成用户手指脱离以后位置不正确的推断等。现在先完成追随用户手指挪动

代码到这里，你用浏览器调治成手机形式应当已可以做到内容追随鼠标转动了，然则还存在许多题目，下面会一一把这些题目修复

第三步，限定手指滑动最大值和最小值

现在用户可以无穷上拉下拉，很明显是不对的。应当当第一个值轻微逾越选中实线下方时就不能鄙人拉了，当末了一个值轻微逾越选中实线上方时就不能在上拉了。所以我们需要俩个值最小转动值： __minScrollTop 和最大转动值: __maxScrollTop

盘算体式格局应当是这个模样：用户下拉会发生一个最大值，而最大值应当是第一个元素下拉到中心的位置。中心应当就是元素容器中心的位置

let __maxScrollTop = component.clientHeight / 2 // 转动最大值

最小值应当是用户上拉时末了一个元素抵达中心的位置，因而应当是内容容器-最大值。

let __minScrollTop =  - (content.offsetHeight - __maxScrollTop) // 转动最小值

最大值最小值有了，只需要在手指上拉下拉的历程当中保证 __scrollTop 不大于或许不小于极值即可,因而在 touchMoveHandler 函数中补充以下代码

if (scrollTop > __maxScrollTop || scrollTop < __minScrollTop) {
    if (scrollTop > __maxScrollTop) {
        scrollTop = __maxScrollTop
    } else {
        scrollTop = __minScrollTop
    }
}

第四步元素的位置正确卡在选中实线中

现在手指抬起的时刻元素住手的位置是存在题目，这个也很轻易明白。因为一个元素是有高度的，当你手指挪动的间隔只需不是元素高度的整数倍他就会卡在选中实线上。因而我们只需要对挪动的间隔除以元素的高度举行四舍五入取整以后再乘以元素的高度就可以保证元素位置是元素高得的倍数了

let indicator = component.querySelector('[data-role=indicator]')
let __itemHeight = parseFloat(window.getComputedStyle(indicator).height)

let touchEndHandler = () => { 
    let scrollTop = Math.round(__scrollTop / __itemHeight).toFixed(5) * __itemHeight
    __publish(scrollTop)
}

如许子发生了俩个题目，一是当极值四舍五入以后逾越了极值就会失足，二是元素跳动太大用户体验不好。所以需要处置惩罚极值状况和增添动画滑动结果

处置惩罚上面题目中发生的极值题目

我们新建一个函数 __scrollTo 特地处理元素位置不对的题目

// 转动到正确位置的要领
let __scrollTo = (top) => {
    top = Math.round((top / __itemHeight).toFixed(5)) * __itemHeight
    let newTop = Math.max(Math.min(__maxScrollTop, top), __minScrollTop)
    if (top !== newTop) {
        if (newTop >= __maxScrollTop) {
            top = newTop - __itemHeight / 2
        } else {
            top = newTop + __itemHeight / 2
        }
    }
    __publish(top, 250) // 这里传入了第二个参数动画时长，先留一个伏笔。背面会讲
}

简朴剖析一下，函数内第一行跟之前的一样。对位置举行四舍五入变成元素高度的倍数。第二行推断元素是不是大于极值，假如大于最大值就取最大值，小于最小值就取最小值。当转动值跟新的转动值不一样的时刻申明用户挪动凌驾了极值。然后举行处置惩罚。大于即是最大值的时刻元素的位置恰好超越半个元素高度的，所以减掉高度的一半，小于最小值的时刻恰好相反。增添一半

增添动画滑动结果

这个比较贫苦，关于动画结果是可以零丁开一章来讲的。这里我简朴说一下我这个动画的思绪吧。只管长话短说。

起首解说一下动画完成的道理，动画可以明白为多张一连的照片疾速挪动凌驾眼睛可以捕捉的速率就会构成连接的行动。这就是我明白的动画，像上面的 touchMoveHandler 要领现实上是会被屡次挪用的，而且挪用频次异常的高，高到了几毫秒挪用一次，这个速率你肉眼一定是区分不出来的，而且每次挪动的间隔贼短。所以你看起来就有了追随手指转动的结果

所以当手指抬起的时刻发明位置不正确这个时刻应当完成一个转动到正确位置的减速动画结果。这里我直接将 vux 内里的 animate.js 文件简化了一下直接拿过来用了

let running = {} // 运转
let counter = 1 // 计时器
let desiredFrames = 60 // 每秒若干帧
let millisecondsPerSecond = 1000 // 每秒的毫秒数

const Animate = {
  // 住手动画
  stop (id) {
    var cleared = running[id] != null
    if (cleared) {
      running[id] = null
    }
    return cleared
  },

  // 推断给定的动画是不是还在运转
  isRunning (id) {
    return running[id] != null
  },
  start (stepCallback, verifyCallback, completedCallback, duration, easingMethod, root) {
    let start = Date.now()
    let percent = 0 // 百分比
    let id = counter++
    let dropCounter = 0

    let step = function () {
      let now = Date.now()

      if (!running[id] || (verifyCallback && !verifyCallback(id))) {
        running[id] = null
        completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), id, false)
        return
      }

      if (duration) {
        percent = (now - start) / duration
        if (percent > 1) {
          percent = 1
        }
      }
      let value = easingMethod ? easingMethod(percent) : percent
      if (percent !== 1 && ( !verifyCallback || verifyCallback(id))) {
        stepCallback(value)
        window.requestAnimationFrame(step)
      }
    }

    running[id] = true
    window.requestAnimationFrame(step)
    return id
  }
}

以上代码作为一个js外链零丁引入，不晓得取什么名就用 animate.js 好了。

简朴解说一下，重如果弄了一个叫 Animate 的对象，内里包括三个属性 stop, isRunning, start。 分别是住手动画，动画是不是在实行，最先一个动画。start 是症结，因为其他俩个函数在这个项目中我都没有用过，哈哈。

start 函数包括许多个参数，stepCallback:每次动画实行的时刻用户处置惩罚的界面元素转动逻辑；verifyCallback：考证动画是不是还需要举行的函数；completedCallback：动画完成时的回调函数；duration：动画时长；easingMethod：划定动画的活动体式格局，像快进慢出，快进快出等等；root:不必管了，没用到。

完毕动画有俩种体式格局，第一种是传入的动画时长杀青，另一种是考证动画是不是还需要实行的函数考证经由历程。不然动画会一向活动

有了动画函数了，接下来就是怎样使用了。这里我们补充一下 __publish 函数，而且增添一个是不是开启动画的全局变量 __isAnimating 和 俩个曲线函数 easeOutCubic, easeInOutCubic

let __isAnimating = false // 是不是开启动画
// 最先快厥后慢的渐变曲线
let easeOutCubic = (pos) => {
    return (Math.pow((pos - 1), 3) + 1)
}
// 以满足最先和完毕的动画
let easeInOutCubic = (pos) => {
    if ((pos /= 0.5) < 1) {
        return 0.5 * Math.pow(pos, 3)
    }
    return 0.5 * (Math.pow((pos - 2), 3) + 2)
}

let __publish = (top, animationDuration) => {
    if (animationDuration) {
        let oldTop = __scrollTop
        let diffTop = top - oldTop
        let wasAnimating = __isAnimating
        let step = function (percent) {
            __scrollTop = oldTop + (diffTop * percent)
            __callback(__scrollTop)
        }
        let verify = function (id) {
            return __isAnimating === id
        }
        let completed = function (renderedFramesPerSecond, animationId, wasFinished) {
            if (animationId === __isAnimating) {
                __isAnimating = false
            }
        }
        __isAnimating = Animate.start(step, verify, completed, animationDuration, wasAnimating ? easeOutCubic : easeInOutCubic)
    } else {
        __scrollTop = top
        __callback(top)
    }
}

将上面的代码补充完全你就会发明转动到正确位置的动画结果完成了，下面就讲讲完成的道理。

这里依据函数实行的递次解说吧。 起首是定义的几个变量, oldTop:用来保留元素的毛病位置; diffTop: 传入的 top 是元素转动的正确位置; step, verify, completed 是 Animate 对象需要的三个回调函数。内里的参数先不必管背面会讲，最下面给 __isAnimating 付了个值。 Animate.start 函数是有返回值的，返回值是当前动画的ID

个中需要注重 wasAnimating ? easeOutCubic : easeInOutCubic 这个。意义就是假如原本的动画存在就将 easeInOutCubic（俩头慢中心快的参数传入进去）函数传入进去, 假如不存在就传入进去 easeOutCubic(最先快厥后慢)函数传入进去。相符的场景就是你手指疾速滑动抬起动画会实行一段时候吧，这个历程动画就是从快到慢的历程，然后动画还没完毕你又接着疾速滑动是不是是又从慢到快了。假如你不接着实行是不是是动画就由快到慢完毕了。这里为啥传入这俩个参数就不解说了，完全可以再开一篇博客举行解说比较贫苦。

step函数，接收一个 percent 翻译过来是百分比的意义。 下面的第一行代码

__scrollTop = oldTop + (diffTop * percent)

可以明白成, 老的位置 + 挪动的间隔 * 百分比 就是新的位置。百分比一向增大当百分比为百分之百的时刻 __scrollTop === top。就完成了一个毛病位置到正确位置的过分。

百分比的盘算体式格局是依据时候来盘算的，然后被动画曲线举行了加工

if (duration) {
    percent = (now - start) / duration
    if (percent > 1) {
      percent = 1
    }
}
let value = easingMethod ? easingMethod(percent) : percent

上面的是中心代码。start 是挪用Animate.start属性的时刻纪录的一个当前时候,now是内部函数实行的时刻纪录的一个当前时候。 now - start 就是经过了多长时候，除以 duration动画时长就可以得出动画时长的百分比。下面推断 easingMethod 是不是传入假如传入了就对原本匀速增添的百分比举行加工变成了动画曲线变化的百分比。

起首是 step 函数，每次活动挪用的函数。接收了一个 percent ，翻译过来是百分比意义。 在表面我定了一个几个局部变量，分别是 oldTop: , , 正确位置减掉毛病位置也就是元素转动的间隔。在 step 函数里给予 __scrollTop 新值

step函数接收了一个叫百分比的参数。 用途就是当元素不在正确位置的时刻会发生一个值 __scrollTop, 而元素应当的正确位置的值是 top,元素挪动的间隔就是 diffTop = top - oldTop 怎样一步一步的挪动到这个位置呢。就经由历程动画函数穿过来的这个百分比参数。这也是为啥在 __scrollTo 要领中挪用 __publish 时到场第二个参数动画时长的缘由了，如许就完成了一个自在转动的动画

verify函数接收一个当前动画的id参数，考证划定规矩就是 __isAnimating === id 时申明开启了下一个动画 __isAnimating 就会转变。致使考证失利，这个时刻就会住手上一个动画

completed函数接收好几个参数，第一个参数是每秒若干帧，第二个参数是当前动画id，第三个参数是完成状况。这里重要用到了第二个参数当前动画id。动画完成的时刻应当奖动画id变成false不然会一向走考证的逻辑。

第五步疾速短暂触摸，让内容本身疾速动起来

像现在内容滑动的间隔基础是即是用户手指触摸的间隔的，如许就跟现实使用不相符，现实中手指用力一滑内容也会蹭蹭的转动。就现在这个模样内容一多也能累死用户，所以需要增添用户用力滑动内容疾速转动起来的逻辑

起首内容本身疾速动起来很明显是有个触发前提的，这里的触发前提是 touchEndHandler 函数实行时的时候减去当末了一次实行 touchMoveHandler 函数的时候小于100毫秒。满足这类状况我们以为用户开启疾速转动状况。所以增添一个全局变量 __lastTouchMove 来纪录末了一次实行 touchMoveHandler 函数的时候。

晓得应当疾速转动了，怎样推断应当转动多长的间隔呢？想一下当前的前提，有一个 __lastTouchMove 和实行 touchEndHandler 函数的时候。这俩个是不是是可以的出来一个时候差。在想一下是不是是有个 __scrollTop 转动的位置，假如在猎取到上一个转动的位置是不是是可以获得一个位置差。那位置 / 时候是即是速率的。我们让 __scrollTop + 速率 是不是是可以获得新的位置。然后我们一向减小速率捡到末了即是 0 是不是是就获得了转动的位置，而且可以依据用户的疾速滑动状况的出来应当转动多长的间隔，用户滑的越疾速率越快间隔越远，相反的用户滑动的速率越慢间隔越近

遗憾的是在 touchEndHandler 函数中拿不到目的挪动的间隔 pageY。所以我们需要在 touchMoveHandler 要领中做手脚，去纪录每次实行这个要领时的时候和位置。所以我们再增添一个全局变量 __positions 为数组范例。

// 上面提到的俩个全局变量的代码
let __lastTouchMove = 0 // 末了转动时候纪录
let __positions = [] // 纪录位置和时候

然后我们将增添 __positions 的代码增添到 touchMoveHandler 要领中

if (__positions.length > 40) {
    __positions.splice(0, 20)
}
__positions.push(scrollTop, e.timeStamp)

__publish(scrollTop)

__startTouchTop = currentTouchTop
__lastTouchMove = e.timeStamp

个中假如 __positions 的长度凌驾40我们就取后20个。因为数组太大占用内存，而且轮回遍历的时刻还异常浪费时候。依据上面的逻辑我们手指疾速挪动不会取时候太长的数据，所以20足够了。当有了珍贵的位置和时候数据我们就需要在 touchEndHandler 要领中剖析出来挪动的速率了。这里我将完全的代码先切出来。

let __deceleratingMove = 0 // 减速状况每帧挪动的间隔
let __isDecelerating = false // 是不是开启减速状况
let touchEndHandler = (e) => {
    if (e.timeStamp - __lastTouchMove < 100) { // 假如抬起时候和末了挪动时候小于 100 证实疾速转动过
        let positions = __positions
        let endPos = positions.length - 1
        let startPos = endPos
        // 因为保留的时刻位置跟时候都保留了， 所以 i -= 2
        // positions[i] > (self.__lastTouchMove - 100) 推断是从什么时刻最先的疾速滑动
        for (let i = endPos; i > 0 && positions[i] > (__lastTouchMove - 100); i -= 2) {
            startPos = i
        }
        if (startPos !== endPos) {
            // 盘算这两点之间的相对活动
            let timeOffset = positions[endPos] - positions[startPos] // 疾速最先时候 - 完毕转动时候
            let movedTop = __scrollTop - positions[startPos - 1] // 终究间隔 - 疾速最先间隔
            
            __deceleratingMove = movedTop / timeOffset * (1000 / 60) // 1000 / 60 代表 1秒60每帧 也就是 60fps。玩游戏的能够明白 60fps是啥意义
    
            let minVelocityToStartDeceleration = 4 // 最先减速的最小速率 
            // 只要速率大于最小加快速率时才会涌现下面的动画
            if (Math.abs(__deceleratingMove) > minVelocityToStartDeceleration) {
                __startDeceleration()
            }
        }
    }
    if (!__isDecelerating) {
        __scrollTo(__scrollTop)
    }
    
    __positions.length = 0
}

新增添了俩个全局变量活动速率和减速状况纪录。当减速状况为true的时刻一定不能实行 __scrollTo 要领的因为这俩个要领是争执的。所以需要 __isDecelerating 纪录一下。内里新定义了一个函数 __startDeceleration。 我们的减速要领也重如果在这个要领内里完成的。给你一下代码

// 最先减速动画
let __startDeceleration = () => {
    let step = () => {
        let scrollTop = __scrollTop + __deceleratingMove
        let scrollTopFixed = Math.max(Math.min(__maxScrollTop, scrollTop), __minScrollTop) // 不小于最小值，不大于最大值
        if (scrollTopFixed !== scrollTop) {
            scrollTop = scrollTopFixed
            __deceleratingMove = 0
        }
        if (Math.abs(__deceleratingMove) <= 1) {
            if (Math.abs(scrollTop % __itemHeight) < 1) {
                __deceleratingMove = 0
            }
        } else {
            __deceleratingMove *= 0.95
        }
        __publish(scrollTop)
    }
    let minVelocityToKeepDecelerating = 0.5
    let verify = () => {
        // 坚持减速运转需要若干速率
        let shouldContinue = Math.abs(__deceleratingMove) >= minVelocityToKeepDecelerating
        return shouldContinue
    }
    let completed = function (renderedFramesPerSecond, animationId, wasFinished) {
        __isDecelerating = false
        if (__scrollTop <= __minScrollTop || __scrollTop >= __maxScrollTop) {
            __scrollTo(__scrollTop)
            return
        }
    }
    __isDecelerating = Animate.start(step, verify, completed)
}

当你把这些代码都加进去的时刻，选择器插件基础上就已完成了。下面解说一下这段让你头痛的代码。

这内里用到了动画，所以一定包括三大回调函数 step, verify, completed。然后一个一个解说一下

step函数：这个函数是让内容一步一步活动的，这个函数基础上跟转动到正确位置的函数类似度很高。 新的位置是老位置 __scrollTop 加上每帧挪动的位置 __deceleratingMove。 然后让每帧挪动的位置一向削减，然则需要注重 scrollTop 不能超越极值，所以做了最大值最小值推断当抵达极值的时刻就将 __deceleratingMove 赋值为0 。

if (Math.abs(__deceleratingMove) <= 1) {
    if (Math.abs(scrollTop % __itemHeight) < 1) {
        __deceleratingMove = 0
    }
}

这段代码，你能够佷懵。他的作用是当转动的位置没有抵达极值的时刻怎样让他卡在正确位置上。 Math.abs(__deceleratingMove) 这是每帧挪动的间隔的绝对值。当他小于1的时刻申明挪动的间隔已异常小了，用户基础上都发觉不到挪动了。然后再用新位置对元素高度取余，假如余数为0示意恰好卡在正确位置上，然则纵然轻微比 0 大那末一丢丢也看不出来，而且基础不会那末巧取到 0，所以当余数满足小于 1 的时刻讲每帧挪动的间隔赋值为0.

verify函数：定义了一个最小每帧挪动间隔的局部变量 minVelocityToKeepDecelerating， 当 __deceleratingMove 值小于他的时刻申明用户基础上不会发明内容还在挪动可以停下来了。

completed函数：既然是完成函数就一定要将 __isDecelerating 参数变成false，不然下次举行的不是疾速挪动内容就没法跑到正确位置上了。这里多加了一步是不是是极值的推断，假如是极值就实行 __scrollTo 函数到正确位置上。

本篇文章到这里就已悉数完毕了，更多其他精彩内容可以关注ki4网的CSS视频教程栏目！

以上就是选择器（picker）插件的完成要领引见（代码）的细致内容，更多请关注ki4网别的相干文章！