基于betterscroll仿写美团外卖城市选择界面

前端开发难免用到一些滚动插件，其中iscroll和betterscroll是很不错的两款插件，本人之前写过一篇使用iscroll仿写支付宝”更多“页面滚动导航效果的，并附有代码，感兴趣的朋友可以移步一观：基于iscroll的滚动导航 -

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

这里是betterscroll的api文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

另外由于项目特殊，在开发过程中vue的使用并没有使用vue-cli来构建（这种开发模式的确很让人吐槽）

看源码点这里：源码

看页面效果点这里：页面效果

页面效果如图：

   实现该页面效果主要有用到一下几点：

1、document.elementFromPoint（x,y）//根据touchmove获取到的屏幕坐标，找到对应坐标的元素

2、代码中的offset()方法 ，获取元素距离窗口边缘（上下左右）距离

3、betterscroll，

      主要用到的方法有：this.scroll.on("scroll",onScroll);                                                                                                       this.scroll.scrollTo(0,y,0);//操作betterscroll滚动到指定位置；

因水平有限，所以不可避免的使用了一些jquery进行了dom操作，所以在性能体验上与美团外卖原生app上的效果还有些差距，如有大神能将此代码优化还请赐教。