vue 2 仿IOS 滚轮选择器从入门到精通（一）

大家好，由于最近从事的是微信公众号和APP内嵌 H5开发，避免不了开发一些和native相同的操作功能，就如接下来说的仿IOS滚轮选择器。

先来个截图：

接下来具体介绍如何实现的。能力有限避免不了错误请指出，有问题QQ邮箱 1766597067@qq.com

先来屡一下需求：

1.移动端用户手上下滑动，内容上下移动，用户手离开数字按照惯性移动一段距离。

2.当停止移动后，选中一个文字并且文字高亮，上面的值会变成你选中的文字。

3.可以连续滚动。

好了我们知道需求了，开始写吧。

写之前，想来一句 “上海天真蓝，可我在写代码”。

说起滚动，不得不提css3的 transform-style: preserve-3d; 和 backface-visibility: hidden;

（1）transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。值如下图：

我们使用preserve-3d 是让我们的值列表呈现3d效果，他是写在列表父级；

（2）backface-visivility 属性定义当元素不面向屏幕时是否可见。

我们使用hidden是背面不可见的，他是写在列表上

不过只有他们是无法完成这个艰巨界面的。只是这两个比较少见并少用，在此记录一下。

结合上面的知识点那我们怎么实现滚筒呢？

我实现的方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .wrapper{
      margin: 200px auto;
      width: 200px;
      position: relative;
    }
    ul{
      width: 100%;
      transform-style: preserve-3d;
      position: absolute;
      top: 40%;
      left:0;
      height: 34px;
    }
    li{
      backface-visibility: hidden;
      position: absolute;
      left: 0;
      top: 0;
      height: 34px;
      text-align: center;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <ul>
    <li style="transform: rotate3d(1, 0, 0, 80deg) translate3d(0, 0, 100px)">27</li>
    <li style="transform: rotate3d(1, 0, 0, 60deg) translate3d(0, 0, 100px)">28</li>
    <li style="transform: rotate3d(1, 0, 0, 40deg) translate3d(0, 0, 100px)">29</li>
    <li style="transform: rotate3d(1, 0, 0, 20deg) translate3d(0, 0, 100px)">30</li>
    <li style="transform: rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 100px)">1</li>
    <li style="transform: rotate3d(1, 0, 0, -20deg) translate3d(0, 0, 100px)">2</li>
    <li style="transform: rotate3d(1, 0, 0, -40deg) translate3d(0, 0, 100px)">3</li>
    <li style="transform: rotate3d(1, 0, 0, -60deg) translate3d(0, 0, 100px)">4</li>
    <li style="transform: rotate3d(1, 0, 0, -80deg) translate3d(0, 0, 100px)">5</li>
  </ul>
</div>
</body>
</html>

可以看到我是用到了定位，rotate3d 和 translate3d，可能你会问为什么要用到translate3d 并且第三个参数写100px？

　　我主要是用到的定位，都定位到一起了，也就是一个黑点了，哈哈。。。然后用 transform 的 rotate3d 统一沿X轴旋转元素到一定的角度，然而我们要做滚筒，滚筒需要半径，所以我用translate3d 拉伸 Z 轴（垂直屏幕）100px,

这样元素就沿着我拉伸前的原点旋转，半径是 100px; 大家可以复制代码运行一下，看看效果，如何有其他方法分享出来吧，共同学习进步。

说了这么多，跟vue有什么关系呢？哈哈。。。你猜？

滚动用什么呢？我之前用过 scroll ios 需要加上 -webkit-overflow-scrolling: touch; 才能触发onscroll, 但是那种做法我试了一下，太麻烦，有滚动条，太垃圾。

这里我们用 touchstart / touchmove / touchend

 mounted() {
      this.$el.addEventListener('touchstart', this.listenerTouchStart, false);
      this.$el.addEventListener('touchmove', this.listenerTouchMove, false);
      this.$el.addEventListener('touchend', this.listenerTouchEnd, false);
 },
 methods: {
　　　　listenerTouchStart(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        isInertial = false;
        this.finger.startY = ev.targetTouches[0].pageY;
        this.finger.prevMove = this.finger.currentMove;
        this.finger.startTime = Date.now();
      },
      listenerTouchMove(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        const move = (this.finger.startY - ev.targetTouches[0].pageY) + this.finger.prevMove;
        this.finger.currentMove = move;
        this.$refs.wheel.style.transform = `rotate3d(1, 0, 0, ${(move / lineHeight) * singleDeg}deg)`;
        this.updateRange(Math.round(move / lineHeight));
      },
      listenerTouchEnd(ev) {
        ev.stopPropagation();
        ev.preventDefault();
        this.finger.endY = ev.changedTouches[0].pageY;
        this.finger.endTime = Date.now();
        this.getInertiaDistance();
      },
}

我们在 start 时，缓存手触摸的的Y轴坐标，startTime 是为了后面touchend时，计算初速度（一定距离时间越短速度越大，惯性滑动越长）

/**
       * 求移动速度（v = s / t），判断用户操作快慢，从而得到惯性的滑动距离
       */
      getInertiaDistance() {
        // 移动距离
        const s = this.finger.startY - this.finger.endY;
        // 移动时间
        const t = this.finger.endTime - this.finger.startTime;
        // 移动速度
        const v = s / t;
        const absV = Math.abs(v);
        isInertial = true;
        this.inertia(absV, Math.floor(absV / v), 0);
      },
      /**
       * 用户结束滑动，应该慢慢放慢，最终停止。从而需要 a(加速度)
       * @param start 开始速度
       * @param position 速度方向，值: 正负1
       * @param target 结束速度
       */
      inertia(start, position, target) {
        if (start <= target || !isInertial) {
          this.animate.stop();
          this.finger.prevMove = this.finger.currentMove;
          this.updateRange(Math.round(this.finger.currentMove / lineHeight));
          this.getSelectValue(this.finger.currentMove);
          return;
        }
        // 这段时间走的位移 S = vt + 1/2at^2;
        const move = (position * start * (1000 / 60)) + (0.5 * a * (1000 / 60) * (1000 / 60)) + this.finger.currentMove;
        // 根据求末速度公式： v末 = v初 + at
        const newStart = (position * start) + (a * (1000 / 60));
        let moveDeg = (move / lineHeight) * singleDeg;
        let actualMove = move;
        // 已经到达目标
        if (newStart <= target) {
          moveDeg = Math.round(move / lineHeight) * singleDeg;
          actualMove = Math.round(move / lineHeight) * lineHeight;
          this.$refs.wheel.style.transition = 'transform 700ms cubic-bezier(0.19, 1, 0.22, 1)';
        } else {
          this.$refs.wheel.style.transition = '';
        }
        this.finger.currentMove = actualMove;
        this.$refs.wheel.style.transform = `rotate3d(1, 0, 0, ${moveDeg}deg)`;
        this.updateRange(Math.round(this.finger.currentMove / lineHeight));
        this.animate.start(this.inertia.bind(this, newStart, position, target));
      }

这里动画是 requestAnimationFrame 我稍微封装了一下，里面用到的公式我已经标注；

我们需要连续滚动，所以界面需要连续刷新，不断更新数字（可能有更好的方法吧）

computed: {
      scrollValues() {
        const result = [];
        for (let i = this.range.start; i <= this.range.end; i += 1) {
          result.push({
            value: this.getRangeData(i),
            index: i, // 这里是旋转参数
          });
        }
        return result;
      },
      getListTop() {
        return {
          top: `${radius - Math.round(lineHeight / 2)}px`,
          height: `${lineHeight}px`
        };
      },
      getWrapperHeight() {
        return {
          height: `${2 * radius}px`,
        };
      },
      getCoverStyle() {
        return {
          backgroundSize: `100% ${radius - Math.round(lineHeight / 2)}px`,
        };
      },
      getDividerStyle() {
        return {
          top: `${radius - Math.round(lineHeight / 2)}px`,
          height: `${lineHeight - 2}px`,
        };
      },
      animate() {
        return new Animate();
      }
    },

最后我把所有的变量提取出来，到时候能根据用户要求显示不同情况

　const a = -0.003; // 加速度
  const radius = 100; // 半径
  const lineHeight = 36; // 文字行高
  let isInertial = false; // 是否正在惯性滑动
  // 根据三角形余弦公式
  // 反余弦得到弧度再转换为度数,这个度数是单行文字所占有的。
  let deg = Math.round((Math.acos((((radius * radius) + (radius * radius)) - (lineHeight * lineHeight)) / (2 * radius * radius)) * 180) / Math.PI);
  // deg这个值须360能整除，因为当滚动列占满一周后可以再次均匀的覆盖在上一周文字上；滚动时不会出现错位
  while (360 % deg !== 0 && deg <= 360) {
    deg += 1;
  }
  const singleDeg = deg;
  // 半圆下的内容条数
  const space = Math.floor((360 / singleDeg) / 2);

最后附上github源码链接大家可以下载运行

vue 2 仿IOS 滚轮选择器从入门到精通（一）的更多相关文章

iOS开发-UI 从入门到精通(三)
iOS开发-UI 从入门到精通(三)是对 iOS开发-UI 从入门到精通(一)知识点的综合练习,搭建一个简单地登陆界面,增强实战经验,为以后做开发打下坚实的基础! ※在这里我们还要强调一下,开发环境和 ...
iOS开发-UI 从入门到精通(二)
iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...
JavaScript 仿ios滑动选择器
从git上找了一个,不过不是我想要的,更改了许多.到了我想要的效果: roller_selector_0_9.js 首先上js: "use strict"; /* * Author ...
iOS开发-UI 从入门到精通(四)
一.UITextField 1.UITextField是什么? (1)UITextField(输入框):是控制文本输入和显示的控件.在App中UITextField出现频率也比较高: (2)iOS系统 ...
iOS开发-UI 从入门到精通(一)
一.UI概述 (1)UI(User Interface)用户界面,用户能看到的各种各样的页面元素: (2)iOS App = 各种各样的UI控件+业务逻辑和算法: (3)想要开发出一款精美的应用程序, ...
vue项目实基础到实战，入门到精通，移动商城
最近发现许多的朋友都问我有没有vue项目的案例学习,最近正在学习vue,在这可以分享给大家,希望大家学有所成,相互交流共同进步,先不说了,吃个宵夜. 就这么多吧,需要的可以在下方留言或者加qq:116 ...
iOS开发-UI 从入门到精通(五)
近日在做项目的时候,为了快捷适配屏幕采用了Storyboard,添加约束以后运行后发现一个问题(下面将以普通案例展示该问题);在4.7 甚至更大的屏幕下是没有问题的,如下图(4.7屏幕): 但是放到更 ...
Android-PickerView【仿iOS的PickerView控件，并封装了时间选择和选项选择这两种选择器】使用
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...
JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...

随机推荐

Vim的基本使用（一）
本文为原创文章,转载请标明出处目录 1.移动光标 2.屏幕滚动 3.模式查找 4.位置标记 5.删除文本 6.撤销与重做 7.插入文本 8.复制与移动 9.修改文本 10.写入与退出 1. 移动光标 ...
python之路第五篇之装饰器:（进阶篇）
装饰器: 学前必备知识: def f1(): print "f1" f1() #表示函数执行 f1 #表示函数,指向内存地址 f1 = lambda x: x + 1 f1() # ...
vue2组件之select2调用
目前,项目中使用了纯前端的静态项目+RESTFul接口的模式.为了更好的对数据进行操作,前端使用了vue2的mvvm功能,但是由于不是单页面应用,所以,并没有涉及到其它的如vue-route等功能,也 ...
Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
CoreCLR源码探索(七) JIT的工作原理(入门篇)
很多C#的初学者都会有这么一个疑问, .Net程序代码是如何被机器加载执行的? 最简单的解答是, C#会通过编译器(CodeDom, Roslyn)编译成IL代码, 然后CLR(.Net Framew ...
js 中 new fn与new fn()的区别
在有些代码中,看见了let fn = new Fn()和let fn = new Fn,刚开始有些人或许和我一样感到些许疑惑,但潜意识的也会想到,这两者说不定就是一样的.没错!!在没有参数的情况下这两 ...
Sping AOP初级——入门及简单应用
在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是和业 ...
Pyhton编程（四）之基本数据类型-字符串详解
一:字符串是什么? 字符串是Python最常用的一种数据类型,虽然看似简单,但能够以不同的方式来使用它们. 字符串就是一系列的字符,在Python中,用引号括起来的都是字符串,其中的引号可以是单引号, ...
LINUX 笔记-rm命令
常用参数: -f :就是force的意思,忽略不存在的文件,不会出现警告消息 -i :互动模式,在删除前会询问用户是否操作 -r :递归删除,最常用于目录删除,它是一个非常危险的参数
MySQL事务与锁
MySQL事务与锁锁的基本概念锁是计算机协调多个进程或线程并发访问某一资源的机制. 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISA ...

vue 2 仿IOS 滚轮选择器 从入门到精通 （一）

vue 2 仿IOS 滚轮选择器 从入门到精通 （一）的更多相关文章

随机推荐

热门专题

vue 2 仿IOS 滚轮选择器从入门到精通（一）

vue 2 仿IOS 滚轮选择器从入门到精通（一）的更多相关文章