微信小程序 文字手势放大缩小

微信小程序 文字手势放大缩小

var distance1//手指移动的距离1

var distance2//手指移动的距离2

参数

data: {

      onetouch:true,//是否第一次触碰

      fontsize:14,//初始字体大小

  },

wxml

  字

wxss

.bule{

  width: 60px;

  height: 60px;

  background-color: rgba(0, 174, 255, 0.637);

  margin-top: 250px;

  margin-left: 150px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.body{

  width: 100%;

  height: 400px;

}

js

/**

  * 双手指触发开始 计算开始触发两个手指坐标的距离

  */

  touchstartCallback: function (e) {

    // 单手指缩放开始，不做任何处理

    if (e.touches.length == 1) return

    this.setData({

      onetouch: false

    })

    // 当两根手指放上去的时候，将距离(distance)初始化。

    let xMove = e.touches[1].clientX - e.touches[0].clientX;

    let yMove = e.touches[1].clientY - e.touches[0].clientY;

    //计算开始触发两个手指坐标的距离

    distance1 = Math.sqrt(xMove * xMove + yMove * yMove);

    this.setData({

      onetouch:false

    })

  },

  /**

  * 双手指移动  计算两个手指坐标和距离

  */

  touchmoveCallback: function (e) {

    // 单手指缩放不做任何操作

    if (e.touches.length == 1) return;

    //双手指运动 x移动后的坐标和y移动后的坐标

    let xMove = e.touches[1].clientX - e.touches[0].clientX;

    let yMove = e.touches[1].clientY - e.touches[0].clientY;

    //双手指运动新的 ditance

    distance2 = Math.sqrt(xMove * xMove + yMove * yMove);

  },

  bindtouchendCallback(e){

    //计算移动的过程中实际移动了多少的距离

      let distanceDiff = distance1 - distance2;

    // 单手指缩放不做任何操作

    if (!this.data.onetouch ) {

      if (distance1 > distance2 && this.data.fontsize > 10) {

        //console.log(this.data.fontsize)

        let fontsize = this.data.fontsize - 4

        this.setData({

          fontsize: fontsize

        })

        wx.showToast({

          title: '字体大小' + fontsize+"px",

          icon: '',

          image: '../../images/font.png',

          duration: 1000,

          mask: true,

          success: function(res) {},

          fail: function(res) {},

          complete: function(res) {},

        })

      } else if (distance1 < distance2 && this.data.fontsize < 23) {

        //console.log(this.data.fontsize)

        let fontsize = this.data.fontsize + 4

        this.setData({

          fontsize: fontsize

        })

        wx.showToast({

          title: '字体大小' + fontsize + "px",

          icon: '',

          image: '../../images/font.png',

          duration: 1000,

          mask: true,

          success: function (res) { },

          fail: function (res) { },

          complete: function (res) { },

        })

      }

      this.setData({

        onetouch: true,

      })

    }

  },

本文参考：小程序实现图片双指缩放