mui picker ios 显示不全_造完一个移动端picker轮子后的体验

最新推荐文章于 2023-07-01 15:18:06 发布

weixin_39793638

最新推荐文章于 2023-07-01 15:18:06 发布

阅读量534

点赞数

文章标签： mui picker ios 显示不全

本文链接：https://blog.csdn.net/weixin_39793638/article/details/111704916

版权

本文介绍了作者在移动端picker组件中实现仿iOS渐进动画的思路，包括分析触发时机、计算渐进位移，并探讨了使用requestAnimationFrame优化动画的尝试。此外，还详细讨论了diff算法在数据更新时的应用，以及参数校验的友好设计。文章还分享了在Vue3.0 API和lerna使用过程中的体验和遇到的挑战。

摘要由CSDN通过智能技术生成

前言

最近用typescript造了一个移动端的picker插件,同时支持js和vue组件调用,这次去尝试了很多不一样比较有创新的思路,将比较创新的思路点和遇到的问题做成了笔记分享给大家

预览

首先我们看一看实现的demo效果

非联动

省市区联动

省市区异步联动

demo网址

具体的demo演示网页可以点击这里查看

使用方法

使用方法可以查看我们的github仓库,我们提供了丰富的demo沙盒演示,如果觉得不错,可以start支持一下

特点

1. 仿ios渐进动画

什么是渐进动画,就是滑动的时候,速度会逐渐逐渐变小,然后趋近于0,如果用过ios app的同学应该能感觉到,刷掘金刷微博的时候滚动页面,会有一段平滑动画然后渐进式的停止

这个位置的难点和核心点在于我们要在用户双手离开屏幕后,仍然需要执行一段滚动,但我们获取用户的手指事件touchstart touchmove touchend只能在用户手指在屏幕上的时候

当初想了很多方法,最终也卡住了,后来借鉴了scroller的源码,找到了方法,这个方法思路有点不太容易想得到,下面我们通过实例来讲解这个方法

首先我们得挂载一下元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
    
      height: 100%;
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    #test {
    
      transform: translate3d(0, 0, 0);
    }

    .chunk {
    
      height: 80px;
    }
  </style>
</head>

<body>
  <div id="test">
  </div>
  <script>
    const $test = document.getElementById('test')
    const $frag = document.createDocumentFragment()
    for (let i = 0; i < 100; i++) {
    
      const $el = document.createElement('div')
      $el.classList = 'chunk'
      $el.innerHTML = i
      $frag.appendChild($el)
    }
    $test.appendChild($frag)
  </script>
</body>

</html>

整个页面如下,此时可以发现无法拖动页面显示超出显示区域

最低0.47元/天解锁文章

weixin_39793638

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mui picker ios 显示不全_造完一个移动端picker轮子后的体验

前言最近用typescript造了一个移动端的picker插件,同时支持js和vue组件调用,这次去尝试了很多不一样比较有创新的思路,将比较创新的思路点和遇到的问题做成了笔记分享给大家预览首先我们看一看实现的demo效果非联动省市区联动省市区异步联动demo网址具体的demo演示网页可以点击这里查看使用方法使用方法可以查看我们的github仓库,我们提供了丰富的demo沙盒演示,如果觉得不错,可以...
复制链接

扫一扫