PHP前端开发

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

百变鹏仔 4天前 #前端问答
文章标签 程序开发

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

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

<view><view><image></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;           //设置图片固定宽度值,          var	viewHeight=parseInt(viewWidth/ratio);    //计算的高度值     	if (viewHeight0){		//往右移动 如果当前的值大于等于0时则不移动,否则当前值加上鼠标拖拽的距离		if (endx &gt;= 0) {	        x = 0;	    } else {	        x = endx + DistanceX;	    }    }else{    	//往左移动:x拖拽值大于等于当前的值,说明已经到边上了,就等于拖拽值,否则当前的值加上鼠标拖拽的距离		if (w_x &gt;= endx) {	        x = -w_x;	    } else {	        x = endx + DistanceX;	    }    }    if (DistanceY&gt;0){    	//往下移动:如果当前的值大于等于0时则不移动,否则当前值加上鼠标拖拽的距离		if(endy&gt;=0){			y =0;	    }else{	        y = endy + DistanceY;	    }    }else{    	//往上移动:y拖拽值大于等于当前的值,说明已经到边上了,就等于拖拽值,否则当前的值加上鼠标拖拽的距离    	if(-endy==h_y||-endy&gt;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()   		})     	});    }})

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