全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[郑州专业seo服务公司]微信小程序开发之图片拖拽功能的实现

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

  

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拖拽值大于等于当前的值★▼★,phpMyAdmin,说明已经到边上了,就等于拖拽值●▪•◁,否则当前的值加上鼠标拖拽的距离
			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() }) })▪△●▲; } })

 

  由于上次做的这个有问题,威海市小程序开发哪家好并没有记录上一次移动的效果。所以这次我使用了洪荒之力,修改下代码。[郑州专业seo服务公司]

  相关推荐:

  H5怎样做出图片拖拽上传预览组件

  JavaScript实现图片拖拽上传的方法

  JavaScript实现文字与图片拖拽效果的方法_javascript技巧

  以上就是微信小程序开发之图片拖拽功能的实现的详细内容△☆,更多请关注久澳传媒编程栏目其它相关文章!

[郑州专业seo服务公司]微信小程序开发之图片拖拽功能的实现

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。