vue项目移动端双指缩放，滑动

方法一：纯手写双指事件

1.HTML

		&lt;div class="box"&gt;
      &lt;div class="demo"  style="width: 700px;height: 400px;"&gt;
        &lt;img class="img" src="https://img2.baidu.com/it/u=862159221,1723036925&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=889&amp;h=500"&gt;
      &lt;/div&gt;
    </div>

2.js

缩放可以用css中的transform：scale 和 zoom

最后选择了zoom,用transform对盒子缩放后，滚动条有问题，滑动不到顶部去，有部分内容查看不了，滑动不了

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
			zoom:1
    }
  },
  methods:{

  },
  mounted(){
        const content = document.querySelector('.demo'); //获取需要放大缩小的盒子
        let firstDistance = 0; // 存放手指开始放上的时，两根手指之间的距离
        // 缩放事件的处理
        const getDistance =  (start, stop) => { //计算两根手指之间的距离
            return Math.sqrt(Math.pow(Math.abs(start.x - stop.x), 2) + Math.pow(Math.abs(start.y - stop.y), 2));
        };
        content.addEventListener('touchstart', function (event) { // 获取第一次触摸的点
            const touches = event.touches;
            if(touches.length > 1){ //判断是否是两指
                const events1 = touches[0];
                const events2 = touches[1];
                const one = {
                    x:events1.pageX, //第一根手指的横坐标
                    y:events1.pageY, //第一根手指的横坐标
                }; //第一根手指的横坐标
                const two = {
                    x:events2.pageX, //第二根手指的横坐标
                    y:events2.pageY, //第二根手指的横坐标
                }; 
                firstDistance = getDistance(one,two);
            }
            // event.preventDefault();
        });
        document.addEventListener('touchmove', (event) => {
            // event.preventDefault();
            const touches = event.touches;
            if(touches.length>1){
                const events1 = touches[0];
                const events2 = touches[1];
                const one = {
                    x:events1.pageX, //第一根手指的横坐标
                    y:events1.pageY, //第一根手指的横坐标
                }; //第一根手指的横坐标
                const two = {
                    x:events2.pageX, //第二根手指的横坐标
                    y:events2.pageY, //第二根手指的横坐标
                }; 
                const distance = getDistance(one,two);
                let zoom = distance / firstDistance
                // content.style.transform = 'scale('+ zoom +')';
                content.style.zoom = this.zoom  * zoom 
				//设置最大最小zomm
            }
        });
				document.addEventListener('touchend', (event)  => {
					this.zoom = content.style.zoom
				})
  }
}
</script>

方法二：插件Easy scroller

git 地址：https://github.com/ulesta/easyscroller

npm 地址：https://www.npmjs.com/package/easyscroller

使用方法

安装：npm i easyscroller —save

import { EasyScroller } from 'easyscroller'
mounted() {
 const ele = document.querySelector('#zoomBox'); //缩放盒子

  this.scroller = new EasyScroller(ele, {
    scrollingX: true,
    scrollingY: true,
    zooming: true,
    minZoom: 0.5,    //最小缩放
    maxZoom: 5,    //最大缩放
    zoomLevel: 0.5, //初始值缩放
    bouncing: false,
  });
},
beforeDestroy() {
  this.scroller.destroy(); //销毁
},