<image src="{{ loadSrc}}" class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindload="imgload" style="width: {,秉承网络共享原则,分享网络资源,Windows系统下载,网络建站技术分享">
    当前位置:
  1. 首页 »
  2. 笔记 »
  3. 正文

微信小程序单指、双指操作图片/层(移动缩放)

零分 2,741

微信小程序单指、双指操作图片/层WXML:

<view class="myCanvas">
            <image src="{{ loadSrc}}" class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindload="imgload" style="width: {{ scaleWidth  }}px;height: {{ scaleHeight }}px;margin-top:{{marginTop}}px;margin-left:{{marginLeft}}px;" />
        </view>

微信小程序单指、双指操作图片/层JS:

/**
   * 监听图片加载成功时触发
   */
  imgload: function (e) {
    this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数
    let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度
    let width = this.multiple > 1 ? this.width : e.detail.width;
    this.setData({
      baseWidth: e.detail.width, // 获取图片实际宽度
      baseHeight: e.detail.height, // 获取图片实际高度
      initWidth: width,
      initHeight: height,
      scaleWidth: width,
      scaleHeight: height,
    })
  },
  /**
   * 双手指触发开始 计算开始触发两个手指坐标的距离
   */
  touchstartCallback: function (e) {
    // 单手指缩放开始,不做任何处理
    if (e.touches.length == 1) {
        lastTouchPoint = { x: 0, y: 0 }        
        return
    };
    let distance = this.calcDistance(e.touches[0], e.touches[1]);
    this.setData({
      'distance': distance,
    })
    
  },
  /**
   * 双手指移动   计算两个手指坐标和距离
   */
  touchmoveCallback: function (e) {
    // 单手指缩放不做任何操作
    if (e.touches.length == 1) {
        if (lastTouchPoint.x == 0 && lastTouchPoint.y == 0) {
            lastTouchPoint.x = e.touches[0].clientX
            lastTouchPoint.y = e.touches[0].clientY
          } else {
            var xOffset = e.touches[0].clientX - lastTouchPoint.x
            var yOffset = e.touches[0].clientY - lastTouchPoint.y
            this.setData({
              marginTop: this.data.marginTop + yOffset,
              marginLeft: this.data.marginLeft + xOffset,
            })
            lastTouchPoint.x = e.touches[0].clientX
            lastTouchPoint.y = e.touches[0].clientY
        }
        return
    };
    let distance = this.calcDistance(e.touches[0], e.touches[1]);
    // 计算移动的过程中实际移动了多少的距离
    let distanceDiff = distance - this.data.distance;
    let newScale = this.data.scale + 0.005 * distanceDiff;
    
   
    // 最小缩放到0.5
    if (newScale <= 0.5) {
      newScale = 0.5;
    };
 
    let scaleWidth = newScale * this.data.initWidth;
    let scaleHeight = newScale * this.data.initHeight;
    this.setData({
      distance: distance,
      scale: newScale,
      scaleWidth: scaleWidth,
      scaleHeight: scaleHeight,
      diff: distanceDiff
    });
  },
 
  /**
   * 计算两个手指距离
   */
  calcDistance(pos0, pos1) {
    let xMove = pos1.clientX - pos0.clientX;
    let yMove = pos1.clientY - pos0.clientY;
    return (Math.sqrt(xMove * xMove + yMove * yMove));
  },

微信小程序canvas初始化、绘图、保存

微信小程序canvas初始化、绘图、保存,记录保存一下 canvas初始化 /***初始化canvas */ initCanvas(){ // 通过 wx.createSelectorQuery()方法创建 const query = wx.createSelectorQuery() query.select('#myCanvas') // canvas id .fields({ node: true, size: true }) .exec((res) => { const
笔记 2,676

微信小程序scroll-view下拉刷新,出现一直刷新

用scroll-view,主要原因是,可以在顶部固定一个模块,虽然position:fixed可以实现,但发现在真机上总会出现一条小白条,看着不是很舒服 scroll-view下拉刷新,需要用到几个属性:scroll-view官方说明 refresher-enabled:开启自定义下拉刷新 refresher-threshold:设置自定义下拉刷新阈值 refresher-default-style:设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式 refresher-background:设置自定义下拉刷新区域背景颜色 refre
笔记 5,019

微信小程序scroll-view禁止滚动条

微信小程序禁用scroll-view滚动条 ::-webkit-scrollbar { display: none; } 其实也简单,就是这样一个CSS样式,关键是这个样式要放在哪里! 在写的时候,一直无法生效,翻看之前写的,也是一样的,但之前的可以生效! 认真翻看才发现,这个要在在app.wxss里,并不是写在页面上!如果怕兼容,可以全部都写上 ::-webkit-scrollbar { display:none; width: 0 !important; height: 0 !important; -webkit-appearance: none;
笔记 2,912

微信小程序开发新版本检测、网络请求、json格式判断封装

微信小程序开发新版本检测、网络请求、json格式判断封装,放在APP.JS里,方便各个页面调用。 App({}) 1、小程序新版本检测 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { updateManager.onUpdateReady(
笔记 2,646