微信小程序开发图片拖拽

曾经终败给现在 2021-09-12 06:24 402阅读 0赞

![20170523114106115][]

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;           //设置图片固定宽度值，  
            var	viewHeight=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,y
    		var 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()
    	   		})
         	});
        }
    })

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

[20170523114106115]: /images/20210813/9bb27a89416842c4aee6249320d6271f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，402人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序-类似探探的卡片拖拽切换

效果用户可以通过拖拽卡片，来将其移除。除此之外还添加了大量的交互式动画。效果图实现为了提升运行速度，采用了只生成两张卡片，并将其不断复用的方法。当用

比眉伴天荒/ 2022年12月28日 11:27/ 0 赞/ 181 阅读

相关无法拖拽文件到微信

我直接拖拽文件到微信上时，发现会出现禁止的小符号，下面是解决方法： 1.在桌面新建一个文本文档打开文本文档复制下面的文字然后保存。 Windows Regist

- 日理万妓/ 2022年11月10日 05:48/ 0 赞/ 983 阅读

相关微信小程序图片分包 || 微信小程序资源分包

静态资源处理在分包根目录建一个static包，把资源放进这个static包 pageA --页面1 --页面2 ......

「爱情、让人受尽委屈。」/ 2022年08月29日 05:54/ 0 赞/ 262 阅读

相关微信小程序之『仿 QQ 消息气泡拖拽消失』

转载：请写明掘金原文链接及作者名 ‘小小小’ 一个潜心研究小程序QQ群：139128168 ← 点击加群今天带来的是仿QQ消息气泡拖拽消失特效，源码中很多地方还是

柔情只为你懂/ 2022年07月13日 06:08/ 0 赞/ 222 阅读

相关微信小程序开发

微信小程序是最近比较火的一个话题。那么什么是小程序？小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走

骑猪看日落/ 2022年06月16日 09:40/ 0 赞/ 314 阅读

相关微信小程序开发

微信小程序开发者指南 [https://developers.weixin.qq.com/miniprogram/dev/framework/][https_develope

心已赠人/ 2021年12月21日 00:43/ 0 赞/ 507 阅读

相关小程序拖拽排序

![20181114164636991.gif][] 效果如图所示下面给大家分享代码： .js var app = getApp(); var x

柔光的暖阳◎/ 2021年09月17日 00:32/ 1 赞/ 393 阅读

相关微信小程序开发图片拖拽

![20170523114106115][] 1.编写页面结构:moveimg.wxml <view class="container" style="heigh

曾经终败给现在/ 2021年09月12日 06:24/ 0 赞/ 403 阅读

相关微信小程序开发—(四)上传图片

一.了解[wx.chooseImage(OBJECT)][wx.chooseImage_OBJECT] ![20170502145924623][] 二.代码编程在pa

﹏ヽ暗。殇╰゛Y/ 2021年09月12日 06:20/ 0 赞/ 508 阅读

相关微信小程序——拖拽定位

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2021年07月25日 23:00/ 0 赞/ 408 阅读