资讯专栏INFORMATION COLUMN

vue 实现 ios 原生picker 效果(实现思路分析)

JaysonWang / 3272人阅读

摘要:以前最早实现了一个类似的时间选择插件,但是适用范围太窄,索性最近要把这个实现方式发布出来,就重写了一个高复用的组件。

以前最早实现了一个类似的时间选择插件,但是适用范围太窄,索性最近要把这个实现方式发布出来,就重写了一个高复用的vue组件。

支持安卓4.0以上,safari 7以上

效果预览 gitHub 滚轮部分主要dom结构

</>复制代码

props

</>复制代码

  1. props: {
  2. data: {
  3. type: Array,
  4. required: true
  5. },
  6. type: {
  7. type: String,
  8. default: "cycle"
  9. },
  10. value: {}
  11. }
设置css样式 使其垂直居中

</>复制代码

  1. .pd-select-line, .pd-select-list, .pd-select-wheel {
  2. position: absolute;
  3. left: 0;
  4. right: 0;
  5. top: 50%;
  6. transform: translateY(-50%);
  7. }
  8. .pd-select-list {
  9. overflow: hidden;
  10. }
滚轮3d样式设置

</>复制代码

  1. /* 滚轮盒子 */
  2. .pd-select-wheel {
  3. transform-style: preserve-3d;
  4. height: 30px;
  5. }
  6. /* 滚轮单项 */
  7. .pd-select-wheel-item {
  8. white-space: nowrap;
  9. text-overflow: ellipsis;
  10. backface-visibility: hidden;
  11. position: absolute;
  12. top: 0px;
  13. width: 100%;
  14. overflow: hidden;
  15. }

主要注意2个属性 transform-style: preserve-3d; backface-visibility: hidden;
第一个是3d布局,让界面3D化,第二个是让滚轮背后自动隐藏(上图红色部分,背面的dom节点 会自动隐藏)

如何实现3D 滚轮

盒子主要这句css transform: rotate3d(1, 0, 0, x deg);
item主要运用这句css transform: rotate3d(1, 0, 0, xdeg) translate3d(0px, 0px, [x]px);


上面2张图展示了translate3d(0px, 0px, [x]px);这句话的效果 [x]就是圆的半径

从上面的图可以看见,我们只需旋转每个dom自身,然后利用translate3d(0px, 0px, [x]px);把每个dom扩展开
就形成了圆环.α就是每个dom自身旋转的角度,因为这里只用了0到180°,所以用了个盒子在装这些dom

行高 和角度计算


已知两边和夹角 算第三边长度 ~=34px
http://tool.520101.com/calcul...

无限滚轮实现

</>复制代码

  1. /* 滚轮展示大小限定 */
  2. spin: {start: 0, end: 9, branch: 9}
  3. /* 获取spin 数据 */
  4. getSpinData (index) {
  5. index = index % this.listData.length
  6. return this.listData[index >= 0 ? index : index + this.listData.length]
  7. }
  8. /* 模运算 获取数组有的索引 这样就构成 圆环了 */
touchend做特殊处理

在touchend 里设置setCSS类型 把滚动数据取整,这样停止的时候就是
一格一格的准确转动到位

</>复制代码

  1. // other code ....
  2. /* 计算touchEnd移动的整数距离 */
  3. let endMove = margin
  4. let endDeg = Math.round(updateDeg / deg) * deg
  5. if (type === "end") {
  6. this.setListTransform(endMove, margin)
  7. this.setWheelDeg(endDeg)
  8. } else {
  9. this.setListTransform(updateMove, margin)
  10. this.setWheelDeg(updateDeg)
  11. }
  12. // other code ....
惯性缓动

</>复制代码

  1. // other code ....
  2. setWheelDeg (updateDeg, type, time = 1000) {
  3. if (type === "end") {
  4. this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
  5. this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
  6. } else {
  7. this.$refs.wheel.style.webkitTransition = ""
  8. this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
  9. }
  10. }
  11. setListTransform (translateY = 0, marginTop = 0, type, time = 1000) {
  12. if (type === "end") {
  13. this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
  14. this.$refs.list.style.webkitTransform = `translateY(${translateY - this.spin.branch * 34}px)`
  15. this.$refs.list.style.marginTop = `${-marginTop}px`
  16. this.$refs.list.setAttribute("scroll", translateY)
  17. console.log("end")
  18. } else {
  19. this.$refs.list.style.webkitTransition = ""
  20. this.$refs.list.style.webkitTransform = `translateY(${translateY - this.spin.branch * 34}px)`
  21. this.$refs.list.style.marginTop = `${-marginTop}px`
  22. this.$refs.list.setAttribute("scroll", translateY)
  23. }
  24. }
  25. // other code ....
获取当前选中值

</>复制代码

  1. /* 在设置完css后获取值 */
  2. setStyle (move, type, time) {
  3. // ...other code
  4. /* 设置$emit 延迟 */
  5. setTimeout(() => this.getPickValue(endMove), 1000)
  6. // ...other code
  7. }
  8. /* 获取选中值 */
  9. getPickValue (move) {
  10. let index = Math.abs(move / 34)
  11. let pickValue = this.getSpinData(index)
  12. this.$emit("input", pickValue)
  13. }
初始化设置

</>复制代码

  1. mounted () {
  2. /* 事件绑定 */
  3. this.$el.addEventListener("touchstart", this.itemTouchStart)
  4. this.$el.addEventListener("touchmove", this.itemTouchMove)
  5. this.$el.addEventListener("touchend", this.itemTouchEnd)
  6. /* 初始化状态 */
  7. let index = this.listData.indexOf(this.value)
  8. if (index === -1) {
  9. console.warn("当前初始值不存在,请检查后listData范围!!")
  10. this.setListTransform()
  11. this.getPickValue(0)
  12. } else {
  13. let move = index * 34
  14. /* 因为往上滑动所以是负 */
  15. this.setStyle(-move)
  16. this.setListTransform(-move, -move)
  17. }
当展示为非无限滚轮的时

这里我们很好判断,就是滚动的距离不能超过原始数的数组长度*34,且不能小于0(实际代码中涉及方向)

</>复制代码

  1. /* 根据滚轮类型 line or cycle 判断 updateMove最大距离 */
  2. if (this.type === "line") {
  3. if (updateMove > 0) {
  4. updateMove = 0
  5. }
  6. if (updateMove < -(this.listData.length - 1) * singleHeight) {
  7. updateMove = -(this.listData.length - 1) * singleHeight
  8. }
  9. }
  10. /* 根据type 控制滚轮显示效果 */
  11. setHidden (index) {
  12. if (this.type === "line") {
  13. return index < 0 || index > this.listData.length - 1
  14. } else {
  15. return false
  16. }
  17. },

dom结构也增加了对应的响应

</>复制代码

    • {{el.value}}
    • {{el.value}}

如有不明白的地方,请在下方留言,或者邮箱联系.k1868548@163.com

代码还有优化空间,欢迎提出 谢谢

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82831.html

相关文章

  • vue 实现 ios 原生picker 效果vue使用腾讯地图获取当前位置

    摘要:实现原生效果若是想看原理,可以看这篇文章若是想直接上手用,这里的组件可以直接拿来用效果组件的运用腾讯地图获取当前位置想要使用腾讯地图,首先当然得看腾讯地图的开发指南我这边使用的是方法一通过内嵌调用参照文档写的例子来用就行,关键是看你拿到数 vue 实现 ios 原生picker 效果 若是想看原理,可以看这篇文章https://www.oudahe.com/p/43627/若是想直接上...

    codercao 评论0 收藏0
  • 优秀博文收藏(不定期更新)

    摘要:我的书签我的书签谨慎导入,小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧,让你少写不必要的,代码更优雅一劳永 我的书签 我的书签(谨慎导入,小心覆盖) 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

    sunsmell 评论0 收藏0
  • 优秀博文收藏(不定期更新)

    摘要:我的书签我的书签谨慎导入,小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧,让你少写不必要的,代码更优雅一劳永 我的书签 我的书签(谨慎导入,小心覆盖) 工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

    zhangfaliang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<