微信小程序开发之图片拖拽功能的实现-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

微信小程序开发之图片拖拽功能的实现

本文主要和大家分享微信小程序开发之图片拖拽功能的实现，拖拽功能我们会经常遇到，希望能帮助到大家。

1.编写页面结构:moveimg.wxml

<view class="container" style="height:{{screenHeight}}px;" ><view class="cnt"><image class="image-style" src="../uploads/2.jpg" style="width:{{imgwidth}}px;height:{{imgheight}}px;"bindtouchstart="startEvent" bindtouchmove="moveEvent"bindload="imageLoad"animation=" {{animationData}}"bindtouchend="endEvent"></image></view></view>

登录后复制

2.编写页面样式：moveimg.wxss

.container {    box-sizing:border-box;    padding:1rem;} .cnt{    width:100%;    height:70%;    border: 1px solid #ccc;    position:relative;    overflow: hidden;    z-index:9999;}.image-style{-webkit-transform:translate(-38px,0px);  }

登录后复制

3.设置数据:moveimg.js

var app = getApp()Page({data: {    imgwidth:0,    imgheight:0,    animationData: {},    movex:0,    movey:0,    x:0,    y:0,},onLoad: function() { // 页面初始化 options为页面跳转所带来的参数var _this = this;wx.getSystemInfo({success: function(res) {_this.setData({screenHeight: res.windowHeight,screenWidth: res.windowWidth,});}});},onReady:function(){    // 页面渲染完成    //实例化一个动画    this.animation = wx.createAnimation({    duration: 1000,     timingFunction: 'linear',//均匀    transformOrigin: "left top 0px",    })},imageLoad: function(e) {          var _this=this;         //1.框的宽高        var cnt_offetw=_this.data.screenWidth-38,        cnt_offeth=(_this.data.screenHeight-38)*0.7;        //2.获取图片真实宽度        var $width=e.detail.width,    //获取图片真实宽度              $height=e.detail.height,              ratio=$width/$height;   //图片的真实宽高比例       //3.进行判断:当图片小于框时候，图片大小等于框大小，当大于框的时候，则成比例呈现       var viewWidth=_this.data.screenWidth;           //设置图片固定宽度值，          varviewHeight=parseInt(viewWidth/ratio);    //计算的高度值     if (viewHeight< cnt_offeth) {            viewHeight=cnt_offeth;        }        _this.setData({             imgwidth:viewWidth,              imgheight:viewHeight,            cnt_boxw:cnt_offetw,            cnt_boxh:cnt_offeth,        })    },    startEvent:function(e){    //1.获取鼠标点击下去的    this.setData({     startx: e.touches[0].pageX,      starty: e.touches[0].pageY    })    },    moveEvent: function(e) { var _this=this;//2.鼠标移动的位置var pageX = e.touches[0].pageX;var pageY = e.touches[0].pageY;var x,y;//3.记住初始化图片x,yvar endx=_this.data.x,endy=_this.data.y;//4.判断var w_x=_this.data.imgwidth-_this.data.cnt_boxw;//x拖拽值：图片宽-框的宽var h_y=parseInt(_this.data.imgheight-_this.data.cnt_boxh);//y拖拽值：图片高-框高var DistanceX = pageX - _this.data.startx;//x:当鼠标点击到移动的点之间的距离var DistanceY =pageY - _this.data.starty;//y:当鼠标点击到移动的点之间的距离if (DistanceX>0){//往右移动 如果当前的值大于等于0时则不移动，否则当前值加上鼠标拖拽的距离if (endx >= 0) {        x = 0;    } else {        x = endx + DistanceX;    }    }else{    //往左移动:x拖拽值大于等于当前的值，说明已经到边上了，就等于拖拽值，否则当前的值加上鼠标拖拽的距离if (w_x >= endx) {        x = -w_x;    } else {        x = endx + DistanceX;    }    }    if (DistanceY>0){    //往下移动:如果当前的值大于等于0时则不移动，否则当前值加上鼠标拖拽的距离if(endy>=0){y =0;    }else{        y = endy + DistanceY;    }    }else{    //往上移动:y拖拽值大于等于当前的值，说明已经到边上了，就等于拖拽值，否则当前的值加上鼠标拖拽的距离    if(-endy==h_y||-endy>h_y){    y=-h_y;    console.log("da0")    }else{    y=endy+DistanceY;    console.log("da 1")    } }   setTimeout(function() {      _this.animation.translate(x, y).step();_this.setData({       animationData: this.animation.export()   })    }.bind(this), 0)    _this.setData({    x:x,    y:y,    })     endx=x;endy=y;//记住这次的图片移动的范围    _this.data.startx=pageX;_this.data.starty=pageY;// 每移动一次把上一次的点作为原点    },    endEvent:function(){ clearTimeout(function(){    this.animation.translate(this.data.x,this.data.y).step();this.setData({       animationData: this.animation.export()   })     });    }})

登录后复制

由于上次做的这个有问题，并没有记录上一次移动的效果。所以这次我使用了洪荒之力，修改下代码。

相关推荐