缩放类小程序实践心得

这是目前最近开发的一个小程序完成后的一些心得。

• 需求是有一张静态地图，用户点击对应的县要进入二级页面，
• 二级页面里面底图是一张静态地图，上面展示出相应的景点。点击景点显示景点简介
• 一级页面和二级页面都是可以拖动和缩放的，双击可以缩放

具体功能页如下：

我先是通过自己写touch事件体验，使用正常的h5测试已经能明显感觉到体验不是很流畅。
改写成小程序，滑动数据都是用setData，本身又有个延迟操作。体验后发现效果非常之差劲，卡顿现象特别严重。放弃了该方案！

后来发现小程序有提供movable-area和movable-view的拖动组件，尝试写了个demo，体验后拖动缩放流畅，效果流畅，我想没跑了这就是我想要的。

不过真正开发后发现还有很多问题需要解决，具体如下：

1. 没有事件监听用户是否结束了拖动和缩放。

2. 移动端是没有双击事件的，如何解决

3. transform-scale用于缩放元素的话，会导致子元素被等比例缩放了，如何解决

4. 如何判断用户点击那个区块，进而跳转二级页面做出不同的响应

接下来，我们来一一解决上面的几个问题！

问题1： 没有事件监听用户是否结束了拖动和缩放？
我们可以通过touchend事件来兼听用户手指是否离开屏幕从而知道用户是否停止了拖动和缩放操作。

但是，但是，如果我是通过代码控制滑动和缩放的情况下又要怎么监听呢？？？这里从一位做IOS工程师的同事那里得到一个很巧妙的解决方案。具体看如下代码：

//微信自带生命周期
onLoad(options){
  this.checkAnimalEnd=true;//开启检查功能
  this</