前言
最近用typescript
造了一个移动端的picker
插件,同时支持js
和vue
组件调用,这次去尝试了很多不一样比较有创新的思路,将比较创新的思路点和遇到的问题做成了笔记分享给大家
预览
首先我们看一看实现的demo效果
非联动
![fa04703094f705fe9945ea2e6f15db06.gif](https://i-blog.csdnimg.cn/blog_migrate/c72cb062b0db244a9f67e029fad63556.gif)
省市区联动
![baf52f66a91cb75243892fe839de1026.gif](https://i-blog.csdnimg.cn/blog_migrate/e9ea84e67263da02180e3a5a5a00d55b.gif)
省市区异步联动
![a548041b242c1fc854f8265cca3cf143.gif](https://i-blog.csdnimg.cn/blog_migrate/3fd873b6347e732f4d43a280bb561f2d.gif)
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>
整个页面如下,此时可以发现无法拖动页面显示超出显示区域