这篇文章主要介绍微信小程序中怎么制作图片拖拽功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
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() }) }); } })
由于上次做的这个有问题,并没有记录上一次移动的效果。所以这次我使用了洪荒之力,修改下代码。
以上是“微信小程序中怎么制作图片拖拽功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。